介绍 js是什么 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>圆柱体& lt;/title>
& lt;才能style>
画布,,,# {
,,,,,宽度:1100 px;
,,,,,身高:600 px;
,,,,,边界:1 px 固体;
,,,}
& lt;才能/style>
& lt;才能script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" js/three.js ">
<>脚本//渲染器
var渲染器;
函数init_renderer () {
.clientWidth宽度=. getelementbyid(“画布”);
身高=. getelementbyid(“画布”).clientHeight;
渲染器=new三人。WebGLRenderer({//生成渲染对象
平滑:真//去锯齿
});
renderer.setSize(宽度、高度);//设置渲染的宽度和高度;
. getelementbyid(“画布”).appendChild (renderer.domElement);
xeeeeee renderer.setClearColor(0, 1);//设置渲染的颜色;
}//场景
var场景;
函数init_scene () {
现?new THREE.Scene ();
}//圆柱体
var缸;
函数init_cylinder () {
var缸=new THREE.CylinderGeometry (80、50300、50,50);
var结构=THREE.ImageUtils.loadTexture(材质/2. jpg, null,函数(t)//图片地址可使用本地,同根目录下文件夹即可
{
});
var材料=new THREE.MeshLambertMaterial({地图:纹理});//材料
多维数据集=new THREE.Mesh(汽缸、材料);
cube.position.set (0 0 5);//设置几何体的位置(x, y, z)
scene.add(立方体);
}//相机
var相机;
函数init_camera () {//相机=new THREE.PerspectiveCamera(100年,宽/高,10000);//透视相机
相机=new三人。OrthographicCamera(宽/- 2、宽/2,高/2,高度/- 2,1,1000)//正投影相机//(可视角度,可视范围的长宽比、相对于深度剪切面的近的距离必须为正数,相对于深度剪切面的远的距离必须为正数)
camera.position。x=600
camera.position。y=100;
camera.position。z=100;
camera.up。x=2;//设置相机的上为“x”轴方向
camera.up。y=2;//设置相机的上为“y”轴方向
camera.up。z=0;//设置相机的上为“z”轴方向
camera.lookAt ({x: 0 y: 0 z: 0});//设置视野的中心坐标
}//光源
var淡定;
函数init_light () {
光=new THREE.DirectionalLight (0 xffffff 1);//设置平行光源(光颜色,光强度)
light.position.set(200100年,50);//设置光源向量(x, y, z)
scene.add(光);
}
函数ThreeJs_Main () {
init_renderer();//渲染
init_scene();//场景
init_cylinder();//圆柱体
init_camera();//相机
init_light();//光源
renderer.clear ();
动画()
renderer.render(场景、摄像头等);
}
函数动画(){//x, y, z为旋转的轴后边数字为速度//cube.rotation。x +=0.01;
cube.rotation。y +=0.01;//cube.rotation。z +=0.01;
renderer.render(场景、摄像头等);
requestAnimationFrame(动画);
}> 头
<身体onload=" ThreeJs_Main () ">
画布
这篇文章主要介绍了三人。js实现圆柱体,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
js是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
分享了三人。js绘制圆柱体的具体代码,供大家参考,具体内容如下