代码拉取完成,页面将自动刷新
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// 创建创建
var scene = new THREE.Scene();
// 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 1000);
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
// 设置渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
new THREE.OrbitControls(camera, renderer.domElement);
// 创建正方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
// 集合 mesh 网络
var cube = new THREE.Mesh(geometry, material);
// 圆柱体
var geometry = new THREE.CircleGeometry(1, 32, 0, 3.14);
var material = new THREE.MeshBasicMaterial({ //材质
color: 0x006699
});
var circle = new THREE.Mesh(geometry, material); // 网孔
// 圆锥
var geometry = new THREE.ConeBufferGeometry(0.3, 1, 15);
var material = new THREE.MeshBasicMaterial({
color: 0xdaa520
});
var cone = new THREE.Mesh(geometry, material);
scene.add(cone);
// 圆柱体
var geometry = new THREE.CylinderGeometry(0.2, 0.2, 3, 12);
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var cylinder = new THREE.Mesh(geometry, material);
// 环圆环
var geometry = new THREE.RingGeometry(0.3, 1, 6);
var material = new THREE.MeshBasicMaterial({
color: 0xccc,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
var edges = new THREE.EdgesHelper(mesh, 0xffffff);
// 环3d
var geometry = new THREE.TorusGeometry(2, 0.3, 30, 20);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var torus = new THREE.Mesh(geometry, material);
// 阿尔法
var geometry = new THREE.TorusKnotGeometry(3, 0.3, 100, 16);
var material = new THREE.LineBasicMaterial({
color: 0x0000f0
});
var torusKnot = new THREE.Mesh(geometry, material);
// 添加网格线
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
color: 0xffffff
}));
scene.add(cube);
scene.add(circle);
scene.add(cone);
scene.add(cylinder);
scene.add(mesh);
// scene.add(edges);
scene.add(torus);
scene.add(torusKnot);
scene.add(line);
camera.position.z = 5;
camera.position.x = 3;
// camera.rotation.y = 30;
circle.position.z = -5;
cone.position.z = -10;
cylinder.position.z = -15;
torus.position.z = -35;
torusKnot.position.z = -60;
line.position.z = -60;
// 动画
var animate = function () {
requestAnimationFrame(animate);
// rot(cube);
// rot(cone);
// rot(cylinder);
// rot(torus);
// rot(torusKnot);
// rot(line);
// rot(circle);
camera.position.z -= 0.1;
// camera.rotation.y += 0.01;
renderer.render(scene, camera);
};
// function rot(geometry) {
// geometry.rotation.x += 0.1;
// geometry.rotation.y += 0.1;
// // geometry.position.z -= 0.3;
// // camera.position.z -= 0.3;
// }
animate();
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。