การเปลี่ยนพื้นหลัง three.js เป็นสีโปร่งใสหรือสีอื่น ๆ

ฉันพยายามเปลี่ยนสิ่งที่ดูเหมือนจะเป็นสีพื้นหลังเริ่มต้นของผืนผ้าใบของฉันจากสีดำเป็นสีโปร่งใส / สีอื่น ๆ - แต่ไม่มีโชค

HTML ของฉัน:

<canvas id="canvasColor">

CSS ของฉัน:

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

ดังที่คุณเห็นในตัวอย่างออนไลน์ต่อไปนี้ฉันมีแอนิเมชั่นบางส่วนต่อท้ายผืนผ้าใบดังนั้นจึงไม่สามารถทำทึบได้: 0; บน id.

ดูตัวอย่างสด: http://devsgs.com/preview/test/particle/

มีความคิดอย่างไรในการเขียนทับสีดำเริ่มต้น?

ฉันเจอสิ่งนี้เมื่อฉันเริ่มใช้ three.js เช่นกัน จริงๆแล้วมันเป็นปัญหาของจาวาสคริปต์ ขณะนี้คุณมี:

renderer.setClearColorHex( 0x000000, 1 );

ในthreejsฟังก์ชัน init ของคุณ เปลี่ยนเป็น:

renderer.setClearColorHex( 0xffffff, 1 );

อัปเดต:ขอบคุณ HdN8 สำหรับโซลูชันที่อัปเดต:

renderer.setClearColor( 0xffffff, 0);

อัปเดต # 2:ตามที่ WestLangley ชี้ไว้ในอีกคำถามที่คล้ายกัน - ตอนนี้คุณต้องใช้โค้ดด้านล่างนี้เมื่อสร้างอินสแตนซ์ WebGLRenderer ใหม่ร่วมกับsetClearColor()ฟังก์ชัน:

var renderer = new THREE.WebGLRenderer({ alpha: true });

อัปเดต # 3: Mr.doob ชี้ให้เห็นว่าเนื่องจากr78คุณสามารถใช้โค้ดด้านล่างเพื่อกำหนดสีพื้นหลังของฉากได้:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

คำตอบแบบเต็ม: (ทดสอบด้วย r71)

ในการตั้งค่าสีพื้นหลังให้ใช้:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

หากคุณต้องการพื้นหลังโปร่งใสคุณจะต้องเปิดใช้งานอัลฟ่าในตัวแสดงภาพก่อน:

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

ดูเอกสารสำหรับข้อมูลเพิ่มเติม

เพื่อความโปร่งใสสิ่งนี้ก็จำเป็นเช่นกัน: renderer = new THREE.WebGLRenderer( { alpha: true } )ผ่านพื้นหลังแบบโปร่งใสที่มีสาม js

ฉันพบว่าเมื่อฉันสร้างฉากผ่านตัวแก้ไข three.js ฉันไม่เพียง แต่ต้องใช้รหัสของคำตอบที่ถูกต้อง (ด้านบน) เพื่อตั้งค่าตัวแสดงผลด้วยค่าอัลฟาและสีที่ชัดเจนฉันต้องเข้าไปในแอพ .json และค้นหาแอตทริบิวต์ "background" ของ "Scene" Object และตั้งค่าเป็น: "background: null".

การส่งออกจากตัวแก้ไข Three.js เดิมตั้งค่าเป็น "background": 0

ในปี 2020 โดยใช้ r115 มันใช้งานได้ดีมากกับสิ่งนี้:

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

ฉันต้องการเพิ่มว่าหากใช้ตัวแก้ไข three.js อย่าลืมตั้งค่าสีพื้นหลังให้ชัดเจนเช่นกันใน index.html

background-color:#00000000