Three.js基礎（三）

let loader = new THREE.TextureLoader();
let texture = loader.load("/static/plane.jpg");
texture.wrapS = THREE.MirroredRepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat = new THREE.Vector2(1, 1);
let material = new THREE.MeshBasicMaterial({map: texture});
let cube = new THREE.Mesh(boxGeometry, material);

Three.js基礎（三）

let texture = new THREE.Texture();
imageLoader.load('/static/wood.jpg', image => {
    texture.image = image;
    texture.needsUpdate = true;
});
objLoader.load("/static/model/Light.obj", object => {
    object.traverse( function (child) {
        if (child instanceof THREE.Mesh) {
            child.material.map = texture;
        }
    });
    scene.add(object);
});

Three.js基礎（三）

// 滑鼠事件：將滑鼠的座標歸一化,x 和 y 方向的取值範圍是 (-1 to +1)
document.addEventListener('mousemove', function (e) {
    e.preventDefault();
    console.log(mouse);
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (e.clientY / window.innerHeight) * 2 + 1;
}, false);
// 更新函式
function render () {
    ray.setFromCamera(mouse, camera);
    let intersects = ray.intersectObjects(scene.children);
    if (intersects.length > 0) {
        if (INTERSECTED !== intersects[0].object) {
            if (INTERSECTED)
                INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
            INTERSECTED.material.emissive.setHex(0xFF0000);
        }
    } else {
        if (INTERSECTED)
            INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
        INTERSECTED = null;
    }
}
function animate () {
    // control.update();
    requestAnimationFrame( animate );
    render();
    renderer.render(scene, camera);
}
animate();

Three.js基礎（三）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

Three.js基礎（三）

相關文章