Question

我偶然发现了Three.js，我非常喜欢它。我是JavaScript的新手，但我想了解更多关于动画等的知识。

//更新 我目前有这个代码，但它没有做任何事情。如果我尝试在没有自定义纹理的情况下执行此操作，则会呈现多维数据集。所以除了纹理之外，目前一切都有效。

var camera, scene, renderer;
var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 500;

    scene = new THREE.Scene();

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    var cubeTexture = new THREE.texture();
    var loader = new THREE.ImageLoader();

    loader.addEventListener("load", function(event) {
        cubeTexture.image = event.content;
        cubeTexture.needsUpdate = true;
    });

    loader.load("crate.gif");

    var geometry = new THREE.CubeGeometry(300, 300, 300);
    var material = new THREE.MeshBasicMaterial({ map: cubeTexture, overdraw: true });

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

}

function onDocumentMouseMove( event ) {

    mouseX = ( event.clientX - windowHalfX );
    mouseY = ( event.clientY - windowHalfY );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {
    camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    camera.lookAt( scene.position );

    renderer.render( scene, camera );
}

非常感谢任何帮助！

Answer 1

您应该在控制台中看到错误。

   var cubeTexture = new THREE.Texture();

免费提示：执行此操作

   var geometry = new THREE.CubeGeometry( 300, 300, 300, 4, 4, 4 );

否则，使用CanvasRenderer会导致很多失真。

Answer 2

因此，如果我理解正确，您希望图像与鼠标一起拉伸和移动？为什么不使用javascript？你可以很容易地读出y＆amp; x位置的鼠标，然后动态改变图像的位置。如果我错了，请纠正我，但如果这是你想要的，那么我推荐使用javascript。

诚恳，哈门布林克曼。

Three.js如何将纹理应用为材质

2 个答案: