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