<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="/lib/three.js"></script>
<script src="/lib/js/utils/SceneUtils.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.setClearColor(new THREE.Color(0x000000)); //设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.set(0, 0, 50);
}
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() {
//轴辅助 (每一个轴的长度)
var object = new THREE.AxesHelper(500);
//scene.add(object);
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//生成gui设置配置项
var controls,knot;
function initGui() {
//声明一个保存需求修改的相关数据的对象
controls = {
"radius": 13,
"tube": 1.7,
"radialSegments": 156,
"tubularSegments": 12,
"p": 3,
"q": 4,
"heightScale": 3.5,
"asParticles": false,
"rotate": false,
redraw: function () {
// 删除掉原有的模型
if (knot) scene.remove(knot);
// 创建一个环形结构
///<param name ="radius" type="float">环形结半径</param>
///<param name ="tube" type="float">环形结弯管半径</param>
///<param name ="radialSegments" type="int">环形结圆周上细分线段数</param>
///<param name ="tubularSegments" type="int">环形结弯管圆周上的细分线段数</param>
///<param name ="p" type="float">p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数,P决定垂直方向的参数.</param>
///<param name ="q" type="float">p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数,Q决定水平方向的参数.</param>
///<param name ="heightScale" type="float">环形结高方向上的缩放.默认值是1</param>
var geom = new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q), controls.heightScale);
//判断绘制的模型
if (controls.asParticles) {
knot = createPointCloud(geom);
} else {
knot = createMesh(geom);
}
// 将新创建的模型添加进去
scene.add(knot);
}
};
var gui = new dat.GUI();
//将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
gui.add(controls, 'tube', 0, 40).onChange(controls.redraw);
gui.add(controls, 'radialSegments', 0, 400).step(1).onChange(controls.redraw);
gui.add(controls, 'tubularSegments', 1, 20).step(1).onChange(controls.redraw);
gui.add(controls, 'p', 1, 10).step(1).onChange(controls.redraw);
gui.add(controls, 'q', 1, 15).step(1).onChange(controls.redraw);
gui.add(controls, 'heightScale', 0, 5).onChange(controls.redraw);
gui.add(controls, 'asParticles').onChange(controls.redraw);
gui.add(controls, 'rotate').onChange(controls.redraw);
controls.redraw();
}
var step = 0;
function render() {
stats.update();
if (controls.rotate) {
knot.rotation.y = step += 0.01;
}
renderer.render(scene, camera);
}
// 使用canvas创建纹理
function generateSprite() {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(255,255,255,1)');
gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
gradient.addColorStop(1, 'rgba(0,0,0,1)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
// 创建粒子系统
function createPointCloud(geom) {
var material = new THREE.PointCloudMaterial({
color: 0xffffff,
size: 3,
transparent: true,
blending: THREE.AdditiveBlending,
map: generateSprite(),
depthTest: false
});
var cloud = new THREE.Points(geom, material);
cloud.sortParticles = true;
return cloud;
}
//创建模型
function createMesh(geom) {
// 创建两面都显示的纹理
var meshMaterial = new THREE.MeshNormalMaterial({});
meshMaterial.side = THREE.DoubleSide;
// 生成模型
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);
return mesh;
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initStats();
initGui();
animate();
window.onresize = onWindowResize;
}
</script>
</html>
THREE.JS 从高级几何体创建THREE.POINTS
原创-
41 Three.js高级几何体THREE.ConvexGeometry
简介通过THREE.ConvexGeometry,我们可以围绕一组点创建一个凸包。所谓凸包就是包围这组点的最小图形。也就是所有的点都在当前
图形 高级几何体 three-js webgl javascript -
45 Three.js拉伸几何体THREE.TubeGeometry
简介THREE.TubeGeometry可以沿着一条三维的样式曲线(THREE.CatmullRomCurve3对象)拉伸出一根管。最简单实现var tubeGeometry
拉伸几何体 webgl three-js tube geometry -
44 Three.js拉伸几何体THREE.ExtrudeGeometry
拉伸几何体是什么拉伸是指我们有一个二维图形,通过针对这个二维图形进行z轴拉伸,将它转换成三维图形。例如,如果我们拉伸THREE.Circle
webgl three-js 拉伸几何体 extrude 默认值 -
42 Three.js高级几何体车床模型THREE.LatheGeometry
简介THREE.LatheGeometry允许你从一条光滑的曲线创建图形。此曲线是由多个点定义,通常称作样条曲线。然后再绕y轴旋转,就生成了一组车床类型的几何体模型。简单实现首先
three-js webgl javascript 高级几何体 车床模型 -
39 Three.js线性几何体材质THREE.LineBasicMaterial
简介THREE.LineBasicMaterial用于绘制线段的基础材质。相关属性 名称 描述 color 该属性设置材质的颜色,如果设置了v
webgl three-js 线性材质 Math html -
40 Three.js线性几何体材质THREE.LineDashedMaterial
简介这种材质和THREE.LineBasicMaterial略有些不同,它不但可以给线段上色,还可以添加一种虚线的效果。额外属性 名称 描述 scale 线条
虚线材质 three-js webgl javascript lineDashed -
three.js之创建一个几何体
附带three.js代码,点击下载
渲染器 html js代码 -
Three.js 实时更新几何体的方法
基于性能的原因,改变几何体(Geometry)的某些属性不会引起浏览器对几何体(Geometry
three.js webgl 实时更新 纹理网格 几何体 -
Three.JS教程2 几何体的创建与使用
顶点的位置是一个浮点数数组,其中每三个元素表示一个点的x、y和z坐标。
javascript 开发语言 ecmascript 渲染器 ide -
102 Three.js 使用几何体生成拱门形状
Three.js的几何体已经能够创建很多的几何体模型,但是,远远还达不到特殊需求的几何体模型顶点的位置调...
three.js webgl 特殊形状 几何体 实例化