javascript - Three.js 生成canvas后如何改变其背景色
本文介绍了javascript - Three.js 生成canvas后如何改变其背景色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我使用three.js做了一个动态云层的效果，但是canvas由于png的图片导致背景是黑色，我想将其改变背景色为家变色，但是我使用`
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "#1e4877");
gradient.addColorStop(0.5, "#4584b4");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);`代码并没有生效，我查了下是因为没有获取到three.js生成的canvas，我如何在其生成前控制canvas的背景色？
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="sky" style="position: absolute;top: 0"></div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/three.js"></script>
<script id="vs" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fs" type="x-shader/x-fragment">
uniform sampler2D map;
uniform vec3 fogColor;
uniform float fogNear;
uniform float fogFar;
varying vec2 vUv;
void main() {
float depth = gl_FragCoord.z / gl_FragCoord.w;
float fogFactor = smoothstep( fogNear, fogFar, depth );
gl_FragColor = texture2D( map, vUv );
gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
}
</script>
<script>
var container;
var camera, scene, renderer;
var mesh, geometry, material;
var mouseX = 0, mouseY = 0;
var start_time = Date.now();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = 700 / 2;
init();
function init() {
container = document.createElement('div');
document.getElementById('sky').appendChild(container);
// Bg gradient
var canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 700;
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "#1e4877");
gradient.addColorStop(0.5, "#4584b4");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
container.style.backgroundSize = '32px 100%';
container.style.height = '700px';
camera = new THREE.PerspectiveCamera(30, window.innerWidth / 700, 1, 3000);
camera.position.z = 6000;
scene = new THREE.Scene();
geometry = new THREE.Geometry();
var texture = THREE.ImageUtils.loadTexture('img/cloud10.png', null, animate);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog(0x4584b4, -100, 3000);
material = new THREE.ShaderMaterial({
uniforms: {
"map": {type: "t", value: texture},
"fogColor": {type: "c", value: fog.color},
"fogNear": {type: "f", value: fog.near},
"fogFar": {type: "f", value: fog.far}
},
vertexShader: document.getElementById('vs').textContent,
fragmentShader: document.getElementById('fs').textContent,
depthWrite: false,
depthTest: false,
transparent: true
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
for (var i = 0; i < 8000; i++) {
plane.position.x = Math.random() * 1000 - 500;
plane.position.y = -Math.random() * Math.random() * 200 - 15;
plane.position.z = i;
plane.rotation.z = Math.random() * Math.PI;
plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
THREE.GeometryUtils.merge(geometry, plane);
}
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -8000;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(window.innerWidth, 700);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 0.25;
mouseY = ( event.clientY - windowHalfY ) * 0.15;
}
function onWindowResize(event) {
camera.aspect = window.innerWidth / 700;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, 700);
}
function animate() {
requestAnimationFrame(animate);
position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;
camera.position.x += ( mouseX - camera.position.x ) * 0.01;
camera.position.y += ( -mouseY - camera.position.y ) * 0.01;
camera.position.z = -position + 8000;
renderer.render(scene, camera);
}
</script>
</body>
</html>解决方案
你少了setClearColor
加个renderer.setClearColor(0x4584b4);即可
这篇关于javascript - Three.js 生成canvas后如何改变其背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
