2 Star 1 Fork 0

大春哥/threejs练习

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
02-test-geometry.html 3.54 KB
一键复制 编辑 原始数据 按行查看 历史
<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>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/dttx123/threejs_exercise.git
git@gitee.com:dttx123/threejs_exercise.git
dttx123
threejs_exercise
threejs练习
master

搜索帮助