iT邦幫忙

0

HTML5:THREE.JS 新手遇到了問題,求幫忙!

  • 分享至 

  • xImage
  •  
</body>
<script>
    var camera, scene, renderer, geometry, material, mesh;
    init();
    animate();

    function init(){
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(640, 480);
        camera = new THREE.PerspectiveCamera(55, 640/480, 1, 10000);
        camera.position.z = 1000;
        
        scene = new THREE.Scene();
        geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(-200, -200, 200));
        geometry.vertices.push(new THREE.Vector3(200, -200, 200));
        geometry.vertices.push(new THREE.Vector3(200, 200, 200));
        geometry.vertices.push(new THREE.Vector3(-200, 200, 200));


        geometry.vertices.push(new THREE.Vector3(-200, -200, -200));
        geometry.vertices.push(new THREE.Vector3(-200, 200, -200));
        geometry.vertices.push(new THREE.Vector3(200, -200, -200));
        geometry.vertices.push(new THREE.Vector3(200, 200, -200));


        geometry.vertices.push(new THREE.Vector3(-200,200,-200));
        geometry.vertices.push(new THREE.Vector3(-200,200,200));
        geometry.vertices.push(new THREE.Vector3(200,200,200));
        geometry.vertices.push(new THREE.Vector3(200,200,-200));


        geometry.vertices.push(new THREE.Vector3(-200,-200,-200));
        geometry.vertices.push(new THREE.Vector3(200,-200,-200));
        geometry.vertices.push(new THREE.Vector3(200,-200,200));
        geometry.vertices.push(new THREE.Vector3(-200,-200,200));


        geometry.vertices.push(new THREE.Vector3(200,-200,-200));
        geometry.vertices.push(new THREE.Vector3(200,200,-200));
        geometry.vertices.push(new THREE.Vector3(200,200,200));
        geometry.vertices.push(new THREE.Vector3(200,-200,200));


        geometry.vertices.push(new THREE.Vector3(-200,-200,-200));
        geometry.vertices.push(new THREE.Vector3(-200,-200,200));
        geometry.vertices.push(new THREE.Vector3(-200,200,200));
        geometry.vertices.push(new THREE.Vector3(-200,200,-200));

        geometry.faces.push(new THREE.Face3(0,1,2));
        geometry.faces.push(new THREE.Face3(0,2,3));
        geometry.faces.push(new THREE.Face3(4,5,6));
        geometry.faces.push(new THREE.Face3(4,6,7));
        geometry.faces.push(new THREE.Face3(8,9,10));
        geometry.faces.push(new THREE.Face3(8,10,11));
        geometry.faces.push(new THREE.Face3(12,13,14));
        geometry.faces.push(new THREE.Face3(12,14,15));
        geometry.faces.push(new THREE.Face3(16,17,18));
        geometry.faces.push(new THREE.Face3(16,18,19));
        geometry.faces.push(new THREE.Face3(20,21,22));
        geometry.faces.push(new THREE.Face3(20,22,23));

        var textureCoords = [
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,

            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
            0.0, 0.0,

            0.0, 1.0,
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,

            1.0, 1.0,
            0.0, 1.0,
            0.0, 0.0,
            1.0, 0.0,

            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
            0.0, 0.0,

            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
        ]

        for (var i = 0; i < geometry.faces.length; i++){
            var uva = new THREE.Vector2(textureCoords[geometry.faces[i]['a']*2],textureCoords[geometry.faces[i]['a']*2+1]);
            var uvb = new THREE.Vector2(textureCoords[geometry.faces[i]['b']*2],textureCoords[geometry.faces[i]['b']*2+1]);
            var uvc = new THREE.Vector2(textureCoords[geometry.faces[i]['c']*2],textureCoords[geometry.faces[i]['c']*2+1]);

            geometry.faceVertexUvs[0].push([uva,uvb,uvc]);

            

        }
        var material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        var dom=document.createElement('canvas');
        document.body.appendChild(dom);
    
    }
    function animate() {
        requestAnimationFrame(animate);
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        renderer.render(scene, camera);
    }
</script>

爲什麽我執行這段碼什麽事情都沒發生??


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Hans5300609
iT邦研究生 4 級 ‧ 2023-05-08 03:46:18

放錯版面囉,這裡是技術文章不是技術問答區
還以為是故意用疑問標題來寫文章

我要留言

立即登入留言