react-three-fiber实现炫酷3D粒子效果首页_React_

import { Scene } from 'three'; const scene = new Scene();

import { PerspectiveCamera } from 'three'; const fov = 75; // 摄像机视锥体垂直视野角度 const aspect = container.clientWidth / container.clientHeight; //摄像机视锥体长宽比 const near = 0.1; // 摄像机视锥体近端面 const far = 100; // 摄像机视锥体远端面 const camera = new PerspectiveCamera(fov, aspect, near, far);

import { WebGLRenderer } from 'three'; const renderer = new WebGLRenderer();

import { Mesh } from 'three'; const mesh = new Mesh(geometry, material);

// 场景 const scene = new THREE.Scene(); // 相机 const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 ); camera.position.z = 1; // 模型 const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animation ); document.body.appendChild( renderer.domElement ); function animation( time ) { mesh.rotation.x = time / 2000; mesh.rotation.y = time / 1000; renderer.render( scene, camera ); }

import ReactDOM from 'react-dom' import { Canvas } from '@react-three/fiber' function App() { return ( 
) } ReactDOM.render(, document.getElementById('root'))

import React from "react"; import { Canvas } from "react-three-fiber"; import "./styles.css"; export default function App() { return ( 
 ); }

// 创建一个球体几何对象 var geometry = new THREE.SphereGeometry(100, 25, 25); // 创建一个点材质对象 var material = new THREE.PointsMaterial({ color: 0x0000ff, //颜色 size: 3, //点渲染尺寸 }); // 点模型对象 参数：几何体 点材质 let point = new THREE.Points(geometry, material); // 网格模型添加到场景中 scene.add(point); 

//背景 const bgStarsPositions = useMemo(() => { const bgStarsPositions = new Float32Array(parameters.stars * 3); // 背景星星的位置 for (let j = 0; j < parameters.stars; j++) { bgStarsPositions[j * 3 + 0] = (Math.random() - 0.5) * 20; bgStarsPositions[j * 3 + 1] = (Math.random() - 0.5) * 20; bgStarsPositions[j * 3 + 2] = (Math.random() - 0.5) * 20; } return bgStarsPositions; }, []);

// 星系 const [positions, colors] = useMemo(() => { const positions = new Float32Array(parameters.count * 3); const colors = new Float32Array(parameters.count * 3); const colorInside = new THREE.Color(parameters.insideColor); const colorOutside = new THREE.Color(parameters.outsideColor); for (let i = 0; i < parameters.count; i++) { // 位置 const x = Math.random() * parameters.radius; const branchAngle = ((i % parameters.branches) / parameters.branches) * 2 * Math.PI; const spinAngle = x * parameters.spin; const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1); const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1); const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1); positions[i * 3] = Math.sin(branchAngle + spinAngle) * x + randomX; positions[i * 3 + 1] = randomY; positions[i * 3 + 2] = Math.cos(branchAngle + spinAngle) * x + randomZ; //颜色 const mixedColor = colorInside.clone(); mixedColor.lerp(colorOutside, x / parameters.radius); colors[i * 3 + 0] = mixedColor.r; colors[i * 3 + 1] = mixedColor.g; colors[i * 3 + 2] = mixedColor.b; } return [positions, colors]; }, []);

//星系  //背景 

const textureLoader = new THREE.TextureLoader(); const shape = textureLoader.load('1.png');

// 背景 提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：最新版React Native环境搭建(亲测)_React_
                                                                
下一篇：使用React组件编写温度显示器_React_