three.js怎么改变贴图的透明度?
我创建的一个球模型, 再在模型上贴了一张图片, 然后缓慢的让这个球消失,改变透明度没有效果! 求赐教
付完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/three.min.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
var w = window.innerWidth - 30;
var h = window.innerHeight - 30;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, w / h, 0.1, 1000);
camera.position.set(50, 50, 50);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xcccccc));
renderer.setSize(w, h);
var axes = new THREE.AxisHelper(30);
scene.add(axes);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// ----------------------------------------------------------------
var img = THREE.ImageUtils.loadTexture('./img/tt4.png'); // 可以用任意图片替换
var sphereGeometry = new THREE.SphereGeometry(10, 32, 16); //创建一个球体
var sphereMaterial = new THREE.MeshBasicMaterial({
map: img
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(10, 10, 10);
scene.add(sphere);
// 旋转
setInterval(function () {
sphere.rotateY(Math.PI / 180);
renderer.render(scene, camera);
}, 1000 / 60)
// 1秒后开始慢慢变透明。
setTimeout(function(){
console.log(sphereGeometry);
setInterval(function(){
// 改变球的透明度 (我这里修改透明度无效?)
sphereMaterial.opacity -= 0.05;
sphere.material.opacity -= 0.05;
}, 100)
}, 1000)
</script>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你把setTimeout这块代码改一下:
你主要没加sphere.material.transparent = true;这行代码,其作用是让材质设置透明属性为true