threeJS JSON加载器和创建蓝色天空

编程入门行业动态更新时间:2024-10-25 02:19:42

threeJS JSON<a href=https://www.elefans.com/category/jswz/34/1771433.html style= 加载器和创建蓝色天空"/>

threeJS JSON加载器和创建蓝色天空

本例来源官方案例

效果图

总体步骤

① 创建场景
② 创建相机
③ 创建物体
*** 创建顶点着色器
*** 创建片元着色器
④创建渲染器

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{padding: 0;margin: 0;overflow: hidden;}</style>
</head>
<body>
<div id="container"></div>
<script type="x-shader/x-vertex" id="vertexShader"></script>
<script type="x-shader/x-fragment" id="fragmentShader"></script><script type="module"></script>
</body>
</html>

导入文件,创建全局变量和函数

   import * as THREE from "./js/three.module.js";import {OrbitControls} from "./js/OrbitControls.js";import Stats from './js/stats.module.js';let renderer,scene,camera,status;action();function action() {onload();run();}function onload(){}function run(){}function onResize(){}

①创建场景

onload函数中

  scene=new THREE.Scene();//创建场景

②创建相机

onload函数中

        camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);camera.position.set(0, 0, 500);//创建相机并设置位置

③创建物体

onload函数中

 let light = new THREE.DirectionalLight( 0xaabbff, 0.3 );light.position.x = 300;light.position.y = 250;light.position.z = - 500;scene.add( light );//let spotLightMesh=new THREE.Mesh(new THREE.SphereGeometry(1,20,20),new THREE.MeshBasicMaterial());//spotLight.add(spotLightMesh);//let gridHelper=new THREE.GridHelper(30,20);//scene.add(gridHelper);let uniforms = {topColor: { value: new THREE.Color( 0x0077ff ) },//天空颜色bottomColor: { value: new THREE.Color( 0xffffff ) },//底部的颜色offset: {value: 400},//偏移量exponent: {value: 0.6}};uniforms.topColor.value.copy( light.color );//光源的颜色赋值给圆球顶部颜色中let skySphere=new THREE.SphereBufferGeometry(4000,40,40);//创建天空球形let skyMaterial=new THREE.ShaderMaterial({//自定义天空着色器uniforms:uniforms,vertexShader:document.getElementById("vertexShader").textContent,fragmentShader:document.getElementById("fragmentShader").textContent,side:THREE.BackSide});//console.log(skyMaterial);let skyMesh=new THREE.Mesh(skySphere,skyMaterial);scene.add(skyMesh);//加载JSON数组let jsonLoader=new THREE.ObjectLoader().load("./json/lightmap.json",function (obj) {console.log(obj);scene.add(obj);});

创建顶点着色器

<script type="x-shader/x-vertex" id="vertexShader">varying vec3 vWorldPosition;void main() {vec4 worldPosition = modelMatrix * vec4( position, 1.0 );vWorldPosition = worldPosition.xyz;//获取x、y、z坐标gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );//转换坐标系}
</script>

创建片元着色器

<script type="x-shader/x-fragment" id="fragmentShader">uniform vec3 topColor;uniform vec3 bottomColor;uniform float offset;uniform float exponent;varying vec3 vWorldPosition;void main() {float h = normalize( vWorldPosition + offset ).y;//归一化函数gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 );//返回第一个参数和第二个参数的线性混合 x*(1-a)+y*a}
</script>

④创建渲染器

onload函数中

  renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(window.devicePixelRatio);//renderer.autoClear=false;renderer.gammaInput=true;renderer.gammaOutput=true;//inear转gammarenderer.setSize(window.innerWidth,window.innerHeight);container.appendChild(renderer.domElement);

onResize函数中

 function onResize() {camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}

run函数中

function run() {requestAnimationFrame(run);renderer.render(scene,camera);status.update();}

总代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{padding: 0;margin: 0;overflow: hidden;}</style>
</head>
<body>
<div id="container"></div>
<script type="x-shader/x-vertex" id="vertexShader">varying vec3 vWorldPosition;void main() {vec4 worldPosition = modelMatrix * vec4( position, 1.0 );vWorldPosition = worldPosition.xyz;//获取x、y、z坐标gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );//转换坐标系}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">uniform vec3 topColor;uniform vec3 bottomColor;uniform float offset;uniform float exponent;varying vec3 vWorldPosition;void main() {float h = normalize( vWorldPosition + offset ).y;//归一化函数gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 );//返回第一个参数和第二个参数的线性混合 x*(1-a)+y*a}
</script><script type="module">import * as THREE from "./js/three.module.js";import {OrbitControls} from "./js/OrbitControls.js";import { GUI } from './js/dat.gui.module.js';import Stats from './js/stats.module.js';let renderer,scene,camera,spotLight,status;action();function action() {onload();run();}function onload() {let container=document.getElementById("container");//获取containerscene=new THREE.Scene();//创建场景camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);camera.position.set(0, 0, 500);//创建相机并设置位置//let ambientLight=new THREE.AmbientLight();//添加环境光//scene.add(ambientLight);/*spotLight=new THREE.SpotLight( 0xaabbff);//添加点光源spotLight.position.set(-60, 300,30);spotLight.intensity=1;scene.add(spotLight);*/let light = new THREE.DirectionalLight( 0xaabbff, 0.3 );light.position.x = 300;light.position.y = 250;light.position.z = - 500;scene.add( light );//let spotLightMesh=new THREE.Mesh(new THREE.SphereGeometry(1,20,20),new THREE.MeshBasicMaterial());//spotLight.add(spotLightMesh);//let gridHelper=new THREE.GridHelper(30,20);//scene.add(gridHelper);let uniforms = {topColor: { value: new THREE.Color( 0x0077ff ) },bottomColor: { value: new THREE.Color( 0xffffff ) },offset: {value: 400},exponent: {value: 0.6}};uniforms.topColor.value.copy( light.color );let skySphere=new THREE.SphereBufferGeometry(4000,40,40);//创建天空球形let skyMaterial=new THREE.ShaderMaterial({//自定义天空着色器uniforms:uniforms,vertexShader:document.getElementById("vertexShader").textContent,fragmentShader:document.getElementById("fragmentShader").textContent,side:THREE.BackSide});//console.log(skyMaterial);let skyMesh=new THREE.Mesh(skySphere,skyMaterial);scene.add(skyMesh);//加载JSON数组let jsonLoader=new THREE.ObjectLoader().load("./json/lightmap.json",function (obj) {console.log(obj);scene.add(obj);});renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(window.devicePixelRatio);//renderer.autoClear=false;renderer.gammaInput=true;renderer.gammaOutput=true;//inear转gammarenderer.setSize(window.innerWidth,window.innerHeight);container.appendChild(renderer.domElement);let guiControls=new function(){this.Cube=function () {};this.Equirectangular=function () {}};let gui=new GUI();//创建guigui.add(guiControls,'Cube');gui.add(guiControls,'Equirectangular');status=new Stats();//创建频率显示container.appendChild(status.dom);//频率挂到左上角let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象window.addEventListener('resize',onResize,false);//浏览器大小改变监听}function onResize() {camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}function run() {requestAnimationFrame(run);renderer.render(scene,camera);status.update();}</script>
</body>
</html>

更多推荐

threeJS JSON加载器和创建蓝色天空

本文发布于:2024-02-19 13:14:46，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1764235.html