threejs 简单的demo
threejs 简单的demo
因为CSS3 写3D 会存在各种兼容性问题
用pixijs又没可视化界面
所以用threejs写3D 最稳妥
<!DOCTYPE html> <html> <head> <title></title> <style> canvas { width: 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可以去谷歌商店去下载 可以检测模型各个属性
如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
作者:newmiracle
出处:https://www.cnblogs.com/newmiracle/