当前位置:网站首页>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;
边栏推荐
- UE4 exports the picture + text combination diagram through ucanvasrendertarget2d
- Window环境下配置Mongodb数据库
- 【數字IC驗證快速入門】20、SystemVerilog學習之基本語法7(覆蓋率驅動...內含實踐練習)
- 一大波开源小抄来袭
- Do not use memset to clear floating-point numbers
- AB package details in unity (super detail, features, packaging, loading, manager)
- [quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
- 2. Heap sort "hard to understand sort"
- Oracle控制文件丢失恢复归档模式方法
- [quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
猜你喜欢
Async and await
Vite path alias @ configuration
【数字IC验证快速入门】20、SystemVerilog学习之基本语法7(覆盖率驱动...内含实践练习)
居然从408改考自命题!211华北电力大学(北京)
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
Getting started with webgl (2)
有一头母牛,它每年年初生一头小母牛。每头小母牛从第四个年头开始,每年年初也生一头小母牛。请编程实现在第n年的时候,共有多少头母牛?
Webgl texture
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
随机推荐
How to build your own super signature system (yunxiaoduo)?
Android -- jetpack: the difference between livedata setValue and postvalue
VS2005 strange breakpoint is invalid or member variable value cannot be viewed
The "go to definition" in VS2010 does not respond or prompts the solution of "symbol not found"
OpenGL common functions
How to understand that binary complement represents negative numbers
Getting started with webgl (2)
Virtual memory, physical memory /ram what
Keil5 does not support online simulation of STM32 F0 series
How to release NFT in batches in opensea (rinkeby test network)
[quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
Implementation of crawling web pages and saving them to MySQL using the scrapy framework
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
Align individual elements to the right under flex layout
LeetCode1_ Sum of two numbers
【微信小程序】Chapter(5):微信小程序基础API接口
[wechat applet] Chapter (5): basic API interface of wechat applet
Ue4/ue5 multi thread development attachment plug-in download address
Whole process analysis of unity3d rendering pipeline
Unity's ASE achieves full screen sand blowing effect