<script src="/lib/three.js"></script>
<script src="/lib/js/utils/SceneUtils.js"></script>
<script src="/lib/js/QuickHull.js"></script>
<script src="/lib/js/geometries/ConvexGeometry.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="/lib/js/libs/stats.min.js"></script>
<script src="/lib/js/libs/dat.gui.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, 0, 60);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1,1,1);
scene.add(light);
}
function initModel() {
generatePoints(120, 2, 2 * Math.PI);
}
//生成模型调用的方法
function generatePoints(segments, phiStart, phiLength) {
// add 10 random spheres
var points = []; //存储顶点位置的数组
var height = 5;
var count = 40;
for (var i = 0; i < count; i++) {
//将顶点坐标push进入数组
points.push(new THREE.Vector3((Math.sin(i * 0.2) + Math.cos(i * 0.3)) * height + 12, ( i - count ) + count / 2, 0));
}
//创建一个存储顶点球体的对象
spGroup = new THREE.Object3D();
var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false}); //声明顶点球体使用的纹理
points.forEach(function (point) {
var spGeom = new THREE.SphereGeometry(0.2); //实例化球形几何体
var spMesh = new THREE.Mesh(spGeom, material); //生成网格
spMesh.position.copy(point); //将当前顶点的坐标位置赋值给当前球体
spGroup.add(spMesh); //添加到对象当中
});
// 将存储顶点球体的对象添加到场景当中
scene.add(spGroup);
// 实例化一个THREE.LatheGeometry,并设置相关的信息
var latheGeometry = new THREE.LatheGeometry(points, segments, phiStart, phiLength);
latheMesh = createMesh(latheGeometry);
scene.add(latheMesh);
}
function createMesh(geom) {
// 实例化一个法向量的材质
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide; //设置两面都可见
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true; //把材质渲染成线框
// 将两种材质都赋给几何体
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return mesh;
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使用animate方法时,将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最远距离
controls.minDistance = 20;
//设置相机距离原点的最远距离
controls.maxDistance = 160;
//是否开启右键拖拽
controls.enablePan = true;
}
function render() {
renderer.render( scene, camera );
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
THREE.JS高级几何体车床模型THREE.LATHEGEOMETRY
原创
©著作权归作者所有:来自51CTO博客作者ZZanZan的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
42 Three.js高级几何体车床模型THREE.LatheGeometry
简介THREE.LatheGeometry允许你从一条光滑的曲线创建图形。此曲线是由多个点定义,通常称作样条曲线。然后再绕y轴旋转,就生成了一组车床类型的几何体模型。简单实现首先
three-js webgl javascript 高级几何体 车床模型 -
41 Three.js高级几何体THREE.ConvexGeometry
简介通过THREE.ConvexGeometry,我们可以围绕一组点创建一个凸包。所谓凸包就是包围这组点的最小图形。也就是所有的点都在当前
图形 高级几何体 three-js webgl javascript -
44 Three.js拉伸几何体THREE.ExtrudeGeometry
拉伸几何体是什么拉伸是指我们有一个二维图形,通过针对这个二维图形进行z轴拉伸,将它转换成三维图形。例如,如果我们拉伸THREE.Circle
webgl three-js 拉伸几何体 extrude 默认值 -
45 Three.js拉伸几何体THREE.TubeGeometry
简介THREE.TubeGeometry可以沿着一条三维的样式曲线(THREE.CatmullRomCurve3对象)拉伸出一根管。最简单实现var tubeGeometry
拉伸几何体 webgl three-js tube geometry -
40 Three.js线性几何体材质THREE.LineDashedMaterial
简介这种材质和THREE.LineBasicMaterial略有些不同,它不但可以给线段上色,还可以添加一种虚线的效果。额外属性 名称 描述 scale 线条
虚线材质 three-js webgl javascript lineDashed -
39 Three.js线性几何体材质THREE.LineBasicMaterial
简介THREE.LineBasicMaterial用于绘制线段的基础材质。相关属性 名称 描述 color 该属性设置材质的颜色,如果设置了v
webgl three-js 线性材质 Math html -
Three.js 实时更新几何体的方法
基于性能的原因,改变几何体(Geometry)的某些属性不会引起浏览器对几何体(Geometry
three.js webgl 实时更新 纹理网格 几何体 -
three.js之创建一个几何体
附带three.js代码,点击下载
渲染器 html js代码 -
102 Three.js 使用几何体生成拱门形状
Three.js的几何体已经能够创建很多的几何体模型,但是,远远还达不到特殊需求的几何体模型顶点的位置调...
three.js webgl 特殊形状 几何体 实例化