我已经开始使用Three.js,并且我已经遇到了补间问题.我想出了如何使用可拖动的立方体破解示例以使用键盘箭头控制旋转.工作得很好.但问题是阿尔法.我尝试使用自定义函数破解它,其中很多:
if(someBoolean == 1){object.material.opacity -= someFloat;}
Run Code Online (Sandbox Code Playgroud)
它有效,但一旦我尝试这样做:
case KEYUP:
new TWEEN.Tween(cubeOpacity).to(0).start();
console.log("tweening opacity to 0");
Run Code Online (Sandbox Code Playgroud)
不,不会发生.控制台说没有什么不对,但补间继续,它保持在值1.并且不知道为什么.并且为每个元素编写一些不透明的函数似乎是反对DRY哲学的,所以... meh.
这是完整的代码:
<script src="js/three.min.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/keys.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var cube;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
init();
animate();
function init(){
container = document.createElement( 'div');
document.body.appendChild(container);
var info = document.createElement ('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTLM = 'Drag to spin';
container.appendChild(info);
camera = …Run Code Online (Sandbox Code Playgroud)