当前位置:网站首页>Three. JS introductory learning notes 10:three JS grid
Three. JS introductory learning notes 10:three JS grid
2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】
Reference learning :
https://www.ituring.com.cn/book/miniarticle/52525
One . Grid concept
One of the most commonly used objects is the grid (Mesh), The mesh is made up of vertices , edge , An object, such as a face . Other objects include line segments (Line), bones (Bone), particle system (ParticleSystem) etc. . Creating objects requires specifying geometry and materials , among , Geometry determines the vertex position and other information of the object , Material determines the color of objects , Texture and other information .
Two . Create grid
Constructors
Mesh(geometry, material)
Example
var material = new THREE.MeshLambertMaterial({
color:0xffff00
});
var geometry = new THREE.CubeGeometry(5,10,20);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
If material
and geometry
If it will not be reused later , It can also be written together as :
Note that there should be no semicolon at the end of the color statement
var mesh = new THREE.Mesh(new THREE.CubeGeometry(5, 10, 20),
new THREE.MeshLambertMaterial({
color: 0xffff00
})
);
Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
var renderer, scene, camera;
var controls, group;
init();
animate();
function init() {
// init renderer
renderer = new THREE.WebGLRenderer( {
antialias: true } );
// renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// init scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
// init camera
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 15, 15, 15 );
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
//light
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(3,10,0);
scene.add(light);
//mesh
/* var material = new THREE.MeshLambertMaterial({ color:0xffff00 }); var geometry = new THREE.CubeGeometry(5,10,20); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh);*/
//mesh Another way of writing
var mesh = new THREE.Mesh(new THREE.CubeGeometry(5, 10, 20),
new THREE.MeshLambertMaterial({
color: 0xffff00
})
);
scene.add(mesh);
}
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
</script>
</body>
</html>
3、 ... and . Modify properties
1. texture of material
After the mesh is created , You can also modify the material
Change to red
var geometry = new THREE.CubeGeometry(1,2,3);
var material = new THREE.MeshLambertMaterial({
color:0xffff00;
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.material = new THREE.MeshLambertMaterial({
color:0xff0000
});
2. Location 、 The zoom 、 rotate
THREE.Mesh
Basis since THREE.Object3D
, Include scale,rotation,position
. They are all THREE.Vector3
example , The method of modifying its value is the same .
THREE.Vector3 Yes x,y,z Three attributes , How to set only one of these properties , You can use the following methods :
mesh.position.z=1
Set multiple properties at the same time , There are two ways to do this
mesh.position.set(1.5, -0.5, 0);
or
mesh.position = new THREE.Vector3(1.5, -0.5 ,0);
Example
mesh.position.set(10,10,10);
mesh.scale.set(0.1,0.1,0.1);
mesh.rotation.x = 60;
边栏推荐
- 【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC(9)(AHB-SRAMC SVTB Overview)
- Asynchronous application of generator function
- [quick start of Digital IC Verification] 24. AHB sramc of SystemVerilog project practice (4) (AHB continues to deepen)
- [follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
- When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
- 【兰州大学】考研初试复试资料分享
- [quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
- webgl_ Enter the three-dimensional world (1)
- Postman generate timestamp, future timestamp
- [data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
猜你喜欢
Monthly observation of internet medical field in May 2022
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
Briefly describe the working principle of kept
[target detection] yolov5 Runtong voc2007 data set
Yunxiaoduo software internal test distribution test platform description document
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
Starting from 1.5, build a microservice framework link tracking traceid
Whole process analysis of unity3d rendering pipeline
The difference between full-time graduate students and part-time graduate students!
Typescript release 4.8 beta
随机推荐
Use cpolar to build a business website (2)
AB package details in unity (super detail, features, packaging, loading, manager)
MongoD管理数据库的方法介绍
【数字IC验证快速入门】24、SystemVerilog项目实践之AHB-SRAMC(4)(AHB继续深入)
Steps to create P8 certificate and warehousing account
Cut ffmpeg as needed, and use emscripten to compile and run
Asynchronous application of generator function
Stm32f103c8t6 PWM drive steering gear (sg90)
使用Scrapy框架爬取网页并保存到Mysql的实现
Database exception resolution caused by large table delete data deletion
The significance of XOR in embedded C language
Points for attention in porting gd32 F4 series programs to gd32 F3 series
Getting started with webgl (4)
HW primary flow monitoring, what should we do
【数字IC验证快速入门】23、SystemVerilog项目实践之AHB-SRAMC(3)(AHB协议基本要点)
Learn good-looking custom scroll bars in 1 minute
A wave of open source notebooks is coming
Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
Use of SVN
Monthly observation of internet medical field in May 2022