颜色（Color）

表示一个颜色。

.lerp ( color : Color, alpha : Float ) : Color

color - 用于收敛的颜色。
alpha - 介于0到1的数字。

将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色和1.0是第一个参数的颜色。

银河系效果:

银河系代码:

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
import ky from "kyouka";/*** Base*/
// Debug
const gui = new dat.GUI();// Canvas
const canvas = document.querySelector("canvas.webgl");// Scene
const scene = new THREE.Scene();/*** Sizes*/
const sizes = {width: window.innerWidth,height: window.innerHeight,
};window.addEventListener("resize", () => {// Update sizessizes.width = window.innerWidth;sizes.height = window.innerHeight;// Update cameracamera.aspect = sizes.width / sizes.height;camera.updateProjectionMatrix();// Update rendererrenderer.setSize(sizes.width, sizes.height);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});/*** Camera*/
// Base camera
const camera = new THREE.PerspectiveCamera(75,sizes.width / sizes.height,0.1,100
);
camera.position.x = 3;
camera.position.y = 3;
camera.position.z = 3;
scene.add(camera);// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;/*** Renderer*/
const renderer = new THREE.WebGLRenderer({canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));/*** Animate*/
const clock = new THREE.Clock();const tick = () => {const elapsedTime = clock.getElapsedTime();// Update controlscontrols.update();// Renderrenderer.render(scene, camera);// Call tick again on the next framewindow.requestAnimationFrame(tick);
};tick();
const params={count:50000,size:0.009,radius:5,branches:3,spin:3,randomness:0.69,randomPower:2,insideColor:"#ff6030",outsideColor:"#1b3984"
}
let geometry=null;
let points=null;
let pointsMaterial=null;
let positions=null;
let colors=null
let generateGalaxy=()=>{if(points!=null){geometry.dispose()pointsMaterial.dispose()scene.remove(points)}geometry=new THREE.BufferGeometry();positions=new Float32Array(params.count*3);colors=new Float32Array(params.count*3)const insideColor=new THREE.Color(params.insideColor)const outsideColor=new THREE.Color(params.outsideColor)for(let i=0;i<params.count;i++){const i3=i*3;const radius=Math.random()*params.radiusconst spinAngle=radius*params.spinconst branchAngle=(i%params.branches)/params.branches*Math.PI*2const randomX=Math.pow(Math.random(),params.randomPower)*(Math.random() < 0.5 ? 1 : -1) *params.randomness const randomY=Math.pow(Math.random(),params.randomPower)*(Math.random() < 0.5 ? 1 : -1) *params.randomness const randomZ=Math.pow(Math.random(),params.randomPower)*(Math.random() < 0.5 ? 1 : -1) *params.randomness positions[i3]=Math.sin(branchAngle+spinAngle)*radius+randomXpositions[i3+1]=0+randomY;positions[i3+2]=Math.cos(branchAngle+spinAngle)*radius+randomZ;const mixedColor=insideColor.clone()mixedColor.lerp(outsideColor,radius/params.radius)colors[i3]=mixedColor.r;colors[i3+1]=mixedColor.g;colors[i3+2]=mixedColor.b;}geometry.setAttribute("color",new THREE.BufferAttribute(colors,3))geometry.setAttribute("position",new THREE.BufferAttribute(positions,3))pointsMaterial=new THREE.PointsMaterial({color:0xffffff,size:params.size,depthWrite:true,vertexColors:true,sizeAttenuation:true, blending:THREE.AdditiveBlending,})points=new THREE.Points(geometry,pointsMaterial)// console.log(points)scene.add(points)
}
generateGalaxy()
gui.add(params,'count').min(100).max(100000).step(100).onFinishChange(generateGalaxy)
gui.add(params,'size').min(0.001).max(0.1).step(0.001).onFinishChange(generateGalaxy)
gui.add(params,'radius').min(0.001).max(20).step(0.001).onFinishChange(generateGalaxy)
gui.add(params, "branches").min(2).max(20).step(1).onFinishChange(generateGalaxy);
gui.add(params, "spin").min(-5).max(5).step(0.01).onFinishChange(generateGalaxy);
gui.add(params, "randomness").min(0).max(2).step(0.01).onFinishChange(generateGalaxy);
gui.add(params, "randomPower").min(1).max(10).step(1).onFinishChange(generateGalaxy);
gui.addColor(params,"insideColor").onFinishChange(generateGalaxy)
gui.addColor(params,"outsideColor").onFinishChange(generateGalaxy)

ThreeJs 学习之旅(十三)—Galaxy Generator(银河系建立)相关推荐

ThreeJs 学习之旅(十六)—Physics(物理)
素材: 1.CANNON.js文档地址 schteppe/cannon.js @ GitHubhttps://schteppe.github.io/cannon.js/ cannonhttp://sc ...
scala学习之旅(十三)：隐式转换和隐式参数
文章地址:http://www.haha174.top/admin/article/list 1.引言 scala 提供的隐式转换和隐式参数功能,是非常有特色的功能.是java 等编程语言所没有的功能 ...
ThreeJs 学习之旅(七)
Material(材质) 一.MeshNormalMaterial(网状通用材料) 例: const MeshBasicMaterial=new THREE.MeshNormalMaterial() ...
Threejs 学习之旅(三)
PerspectiveCamera 透视相机例: const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, ...
WCF学习之旅—实现支持REST客户端应用（二十四）
WCF学习之旅-实现REST服务(二十二) WCF学习之旅-实现支持REST服务端应用(二十三) 在上二篇文章中简单介绍了一下RestFul与WCF支持RestFul所提供的方法,及创建一个支持RES ...
WCF学习之旅—第三个示例之四（三十）
上接WCF学习之旅-第三个示例之一(二十七) WCF学习之旅-第三个示例之二(二十八) WCF学习之旅-第三个示例之三(二十九) ...
小猪的Python学习之旅 —— 1.基础知识储备
小猪的Python学习之旅 -- 1.基础知识储备引言: (文章比较长,建议看目录按需学习-) 以前刚学编程的时候就对Python略有耳闻,不过学校只有C,C++,Java,C#. 和PHP有句&q ...
猿创征文｜我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅自我介绍我浑噩的大一大二(是不是另一个你) 我的大三生活大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...
小猪的Python学习之旅 —— 15.浅尝Python数据分析
小猪的Python学习之旅 -- 15.浅尝Python数据分析:分析2018政府工作报告中的高频词标签:Python 一句话概括本文: 爬取2018政府工作报告,通过jieba库进行分词后做词频统 ...

ThreeJs 学习之旅(十三)—Galaxy Generator(银河系建立)

颜色（Color）

.lerp ( color : Color, alpha : Float ) : Color

ThreeJs 学习之旅(十三)—Galaxy Generator(银河系建立)相关推荐

最新文章

热门文章