Thay đổi nền ba.js thành trong suốt hoặc màu khác

Tôi đã cố gắng thay đổi những gì có vẻ là màu nền mặc định của canvas của tôi từ đen sang trong suốt / bất kỳ màu nào khác - nhưng không may mắn.

HTML của tôi:

<canvas id="canvasColor">

CSS của tôi:

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

Như bạn có thể thấy trong ví dụ trực tuyến sau, tôi có một số hoạt ảnh được thêm vào canvas, vì vậy không thể chỉ tạo độ mờ: 0; trên id.

Xem trước trực tiếp: http://devsgs.com/preview/test/particle/

Bất kỳ ý tưởng làm thế nào để ghi đè màu đen mặc định?

Tôi cũng gặp phải điều này khi bắt đầu sử dụng Three.js. Nó thực sự là một vấn đề javascript. Bạn rất muốn:

renderer.setClearColorHex( 0x000000, 1 );

trong threejshàm init của bạn . Thay đổi nó thành:

renderer.setClearColorHex( 0xffffff, 1 );

Cập nhật: Cảm ơn HdN8 cho giải pháp cập nhật:

renderer.setClearColor( 0xffffff, 0);

Cập nhật # 2: Như đã được WestLangley chỉ ra trong một câu hỏi tương tự khác - bây giờ bạn phải sử dụng đoạn mã dưới đây khi tạo một phiên bản WebGLRenderer mới cùng với setClearColor()hàm:

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

Cập nhật # 3: Mr.doob chỉ ra rằng vì r78bạn có thể sử dụng mã bên dưới để đặt màu nền cho cảnh của mình:

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

Một câu trả lời đầy đủ: (Đã thử nghiệm với r71)

Để đặt màu nền, hãy sử dụng:

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

Nếu bạn muốn có một nền trong suốt, trước tiên bạn sẽ phải bật alpha trong trình kết xuất của mình:

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

Xem tài liệu để biết thêm thông tin.

Để minh bạch, điều này cũng là bắt buộc: renderer = new THREE.WebGLRenderer( { alpha: true } )thông qua Nền trong suốt với ba.js

Tôi thấy rằng khi tôi tạo một cảnh thông qua trình chỉnh sửa Three.js, tôi không chỉ phải sử dụng mã của câu trả lời chính xác (ở trên), để thiết lập trình kết xuất có giá trị alpha và màu rõ ràng, tôi còn phải truy cập vào ứng dụng tập tin .json và tìm thấy "nền" thuộc tính "Scene" Object và đặt nó là: "background: null".

Quá trình xuất từ ​​trình chỉnh sửa Three.js ban đầu được đặt thành "nền": 0

Vào năm 2020 sử dụng r115 nó hoạt động rất tốt với điều này:

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

Tôi cũng muốn thêm điều đó nếu sử dụng trình chỉnh sửa Three.js, đừng quên đặt màu nền cũng rõ ràng trong index.html.

background-color:#00000000