zoukankan      html  css  js  c++  java
  • threejs 简单的demo

    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可以去谷歌商店去下载   可以检测模型各个属性

  • 相关阅读:
    Javascript基础与面向对象基础~第四讲 Javascript中的类对象
    转:正确区分不同的查找算法count,find,binary_search,lower_bound,upper_bound,equal_range
    原码,补码,反码相互转化
    c++模板类/模板函数的声明与定义应该放在头文件里
    低调做人,高调做事
    汇编 一道小题
    保罗·格雷厄姆(Paul Graham
    Microsoft Word已停止工作的解决办法
    转:中国互联网十五年的22个创新模式
    转:二进制、八进制、十进制、十六进制之间转换
  • 原文地址:https://www.cnblogs.com/newmiracle/p/13872957.html
Copyright © 2011-2022 走看看