threejs 简单的demo

因为CSS3 写3D 会存在各种兼容性问题

用pixijs又没可视化界面

所以用threejs写3D 最稳妥

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
    canvas {
         100%;
        height: 100%
    }
    </style>
    <script src="/moban/js/three.js"></script>
        <script src="{$yumingnew}/js/TweenMax.js"></script>
</head>

<body>
    <script>
    var camera, scene, renderer;
    var mesh;

    init();
    animate();

    function init() {
        //设置渲染窗口的大小
        var canvaswidth=window.innerWidth;
        var canvasheight=window.innerHeight;

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(canvaswidth, canvasheight);
        document.body.appendChild(renderer.domElement);
        //
        camera = new THREE.PerspectiveCamera(70, canvaswidth / canvasheight, 1, 1000);
        camera.position.z = 500;
        scene = new THREE.Scene();

        var geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        // A begin
        geometry.vertices[0].uv = new THREE.Vector2(0, 0);
        geometry.vertices[1].uv = new THREE.Vector2(1, 0);
        geometry.vertices[2].uv = new THREE.Vector2(1, 1);
        geometry.vertices[3].uv = new THREE.Vector2(0, 1);

        // A end
        // B begin
        // 纹理坐标怎么弄
        var texture1 = THREE.ImageUtils.loadTexture("/moban/images/tietu.png", null, function(t) {});
        var material = new THREE.MeshBasicMaterial({ map: texture1 });
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.z = 0;
        mesh.position.x = 0;
        mesh.position.y = 0;
        mesh.rotation.x = 0;
        mesh.rotation.y = 0;
        mesh.rotation.z = 0;
        scene.add(mesh);
         //用于自适应
        window.addEventListener('resize', onWindowResize, false);


       var tm = new TimelineMax();
    
      // tm.to(camera.position, 3, {z:100,delay:0,repeat: 2, yoyo: true,ease: Linear.easeNone});//
      tm.to(camera.rotation, 13, {z:100,delay:0,repeat: 2, yoyo: true,ease: Linear.easeNone});//

    }

    function onWindowResize() {
        camera.aspect = canvaswidth / canvasheight;
        camera.updateProjectionMatrix();
        renderer.setSize(canvaswidth,canvasheight);
    }

    function animate() {
      
        requestAnimationFrame(animate);

         // camera.position.z-=1;
        renderer.render(scene, camera);
    
    }
    </script>
</body>

</html>

threejs可视化界面可以去github去下载

inspect可以去谷歌商店去下载可以检测模型各个属性

threejs 简单的demo

相关推荐