当前位置:网站首页>Threejs realizes sky box, panoramic scene, ground grass
Threejs realizes sky box, panoramic scene, ground grass
2022-07-05 04:00:00 【Zuo Ben】
1, Introduce :
This example uses r95 edition Three.js library . A scene will be created to realize the panoramic background of the sky box , Add axis , Add the ground and set the ground material . The renderings are as follows :
2, Main description :
Create skybox , Mainly 6 This picture builds the picture of the whole scene . These six pictures are respectively facing forward (posz)、 Backward (negz)、 Upward (posy)、 Down (negy)、 To the right (posx) And to the left (negx).Three.js These images will be integrated together to create a seamless environment map . The code is as follows :
var scene = new THREE.Scene();
var urls = [
'assets/textures/cubemap/flowers/posx.jpg',
'assets/textures/cubemap/flowers/negx.jpg',
'assets/textures/cubemap/flowers/posy.jpg',
'assets/textures/cubemap/flowers/negy.jpg',
'assets/textures/cubemap/flowers/posz.jpg',
'assets/textures/cubemap/flowers/negz.jpg'
];
var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);
Create the ground and add materials ,Three.js Two new materials are provided :THREE.MeshStandardMaterial( Standard material ) and THREE.MeshPhysicalMaterial( Physical material ), What we use here is MeshPhysicalMaterial Standard material . The code is as follows :
/**
* Create the ground and add materials
* wrapS Attributes define the texture along x Axial behavior , and warpT Attributes define the texture along y Axial behavior .
* Three.js The following two options are provided for these attributes :
* ·THREE.RepeatWrapping Allow the texture to repeat itself .
* ·THREE.ClampToEdgeWrapping Is the default value of the attribute .
* The property value is THREE.ClampToEdgeWrapping when , Then the whole texture will not repeat , Only the pixels at the edge of the texture will be repeated to fill the remaining space .
*/
function createPlaneGeometryBasicMaterial() {
var textureLoader = new THREE.TextureLoader();
var cubeMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("assets/textures/stone/cd.jpg"),
});
cubeMaterial.map.wrapS = THREE.RepeatWrapping;
cubeMaterial.map.wrapT = THREE.RepeatWrapping;
cubeMaterial.map.repeat.set(8, 8)
// Create the ground plane and set the size
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var plane = new THREE.Mesh(planeGeometry, cubeMaterial);
// Set the plane position and rotate
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.z = 0;
return plane;
}
3, Source code is as follows :
<!DOCTYPE html>
<html>
<head>
<title>Threejs Realize sky box 、 Scene background 、 panorama </title>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="dom"></div>
<script type="text/javascript">
var camera;
var renderer;
function init() {
// Create a scene , It will contain all our elements , Like an object , Cameras and lights .
var scene = new THREE.Scene();
var urls = [
'assets/textures/cubemap/flowers/posx.jpg',
'assets/textures/cubemap/flowers/negx.jpg',
'assets/textures/cubemap/flowers/posy.jpg',
'assets/textures/cubemap/flowers/negy.jpg',
'assets/textures/cubemap/flowers/posz.jpg',
'assets/textures/cubemap/flowers/negz.jpg'
];
var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);
// Create a camera , It defines where we are looking
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// Aim the camera at the center of the scene
camera.position.x = 10;
camera.position.y = 50;
camera.position.z = 90;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// Create a renderer and set the size ,WebGLRenderer The computer graphics card will be used to render the scene
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// scene.add(new THREE.AmbientLight(0x666666));
var ambientLight = new THREE.AmbientLight("#ffffff", 1);
scene.add(ambientLight);
// Display the coordinate axis on the screen
var axes = new THREE.AxisHelper(100);
scene.add(axes);
// Add planes to the scene
var plane = createPlaneGeometryBasicMaterial();
scene.add(plane);
// Add the output of the renderer to HTML Elements
document.getElementById("dom").appendChild(renderer.domElement);
// Start animation
renderScene();
// Create a ground
function createPlaneGeometryBasicMaterial() {
var textureLoader = new THREE.TextureLoader();
var cubeMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("assets/textures/stone/cd.jpg"),
});
cubeMaterial.map.wrapS = THREE.RepeatWrapping;
cubeMaterial.map.wrapT = THREE.RepeatWrapping;
cubeMaterial.map.repeat.set(8, 8)
// Create the ground plane and set the size
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var plane = new THREE.Mesh(planeGeometry, cubeMaterial);
// Set the plane position and rotate
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.z = 0;
return plane;
}
function renderScene() {
orbit.update();
// Use requestAnimationFrame Function to render
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// Rendered scenes
renderer.render(scene, camera);
}
window.onload = init;
// Modify the scene as the form changes
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Listen for form resizing events
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
If you need a complete code, please leave a message or contact me on wechat :1171053128
边栏推荐
- IronXL for . NET 2022.6
- Assembly - getting started
- 阿里云ECS使用cloudfs4oss挂载OSS
- [array]566 Reshape the matrix - simple
- 深度学习——LSTM基础
- Installation of postman and postman interceptor
- 3. Package the bottom navigation tabbar
- Timing manager based on C #
- 特殊版:SpreadJS v15.1 VS SpreadJS v15.0
- An elegant program for Euclid‘s algorithm
猜你喜欢
ActiveReportsJS 3.1 VS ActiveReportsJS 3.0
[wp][入门]刷弱类型题目
Use Firefox browser to quickly pick up Web image materials
灵魂三问:什么是接口测试,接口测试怎么玩,接口自动化测试怎么玩?
How to solve the problem that easycvr changes the recording storage path and does not generate recording files?
Is there a sudden failure on the line? How to make emergency diagnosis, troubleshooting and recovery
Interview byte, pass the exam and directly work on three sides. As a result, I found an architect to hang me?
陇原战“疫“2021网络安全大赛 Web EasyJaba
官宣!第三届云原生编程挑战赛正式启动!
JVM garbage collection
随机推荐
Clickhouse物化视图
MindFusion. Virtual Keyboard for WPF
Nmap user manual learning records
The order of LDS links
3. Package the bottom navigation tabbar
Test d'automatisation de l'interface utilisateur télécharger manuellement le pilote du navigateur à partir de maintenant
BDF application - topology sequence
Clickpaas low code platform
Multimedia query
输入的查询SQL语句,是如何执行的?
Use object composition in preference to class inheritance
Thread Basics
Interview byte, pass the exam and directly work on three sides. As a result, I found an architect to hang me?
Analysis of glibc strlen implementation mode
【看完就懂系列】一文6000字教你从0到1实现接口自动化
[wp]bmzclub writeup of several questions
Google Chrome CSS will not update unless the cache is cleared - Google Chrome CSS doesn't update unless clear cache
25K 入职腾讯的那天,我特么哭了
[punch in questions] integrated daily 5-question sharing (phase III)
How does the applet solve the rendering layer network layer error?