tongChong
/
BingDwenDwen
0
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 新增Olympic Container.

This commit is contained in:
dragonir 2022-01-26 20:01:49 +08:00
parent 959d9564f1
commit 5838e715d2
6 changed files with 318 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -12,6 +12,7 @@ import Metaverse from './containers/Metaverse/index';
import SegmentFault from './containers/SegmentFault/index';
import Diamond from './containers/Diamond/index';
import Human from './containers/Human/index';
import Olympic from './containers/Olympic/index';
function App() {
return (
@ -30,6 +31,7 @@ function App() {
<Route element={ <SegmentFault /> } path="/segmentfault" />
<Route element={ <Diamond /> } path="/diamond" />
<Route element={ <Human /> } path="/human" />
<Route element={ <Olympic /> } path="/olympic" />
</Routes>
</Router>
</div>

1
src/containers/Olympic/README.md Normal file
View File

@ -0,0 +1 @@
# Three.js实现3D冬奥会创意页面

BIN
src/containers/Olympic/images/snow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 B

144
src/containers/Olympic/index.js Normal file
View File

@ -0,0 +1,144 @@
/* eslint-disable */
import React from 'react';
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module";
export default class Olympic extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.initThree()
}
initThree = () => {
var container, controls, stats;
var camera, scene, renderer, light, earth = null, meshes = [];
var fiveCyclesGroup = new THREE.Group();
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0x2d2d2d);
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var axes = new THREE.AxisHelper(30);
scene.add(axes);
// 性能工具
stats = new Stats();
document.documentElement.appendChild(stats.dom);
const cubeGeometry = new THREE.BoxGeometry(0.001, 0.001, 0.001);
const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xdc161a });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0, 0,);
light = new THREE.DirectionalLight(0xdddddd, 1);
light.intensity = 1.2;
light.position.set(-5, 8, 3);
light.castShadow = true;
light.target = cube;
light.shadow.mapSize.width = 512 * 12;
light.shadow.mapSize.height = 512 * 12;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = - 5;
light.shadow.camera.left = - 5;
light.shadow.camera.right = 10;
scene.add(light);
var ambientLight = new THREE.AmbientLight(0xdddddd);
scene.add(ambientLight);
// 创建五环
const fiveCycles = [
{
key: 'cycle_0',
color: 0x0885c2,
position: { x: -250, y: 0, z: 0 }
},
{
key: 'cycle_1',
color: 0x000000,
position: { x: -10, y: 0, z: 5 }
},
{
key: 'cycle_2',
color: 0xed334e,
position: { x: 230, y: 0, z: 0 }
},
{
key: 'cycle_3',
color: 0xfbb132,
position: { x: -125, y: -100, z: -5 }
},
{
key: 'cycle_4',
color: 0x1c8b3c,
position: { x: 115, y: -100, z: 10 }
}
];
fiveCycles.map(item => {
let cycleMesh = new THREE.Mesh(new THREE.TorusGeometry(100, 10, 10, 50), new THREE.MeshLambertMaterial({
color: new THREE.Color(item.color),
side: THREE.DoubleSide
}));
cycleMesh.position.set(item.position.x, item.position.y, item.position.z);
meshes.push(cycleMesh);
fiveCyclesGroup.add(cycleMesh);
});
fiveCyclesGroup.scale.set(.025, .025, .025)
fiveCyclesGroup.position.set(0, 0, 0)
scene.add(fiveCyclesGroup)
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
window.addEventListener('resize', onWindowResize, false);
// window.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
stats && stats.update();
controls && controls.update();
// camera.position.x += (mouseX - camera.position.x) * 0.005;
// camera.position.y += (-mouseY - camera.position.y) * 0.005;
// camera.lookAt(scene.position);
}
}
render () {
return (
<div id="container"></div>
)
}
}

BIN
src/containers/Olympic/models/land.glb Normal file
View File

Binary file not shown.

171
src/containers/Olympic/temp.html Normal file
View File

@ -0,0 +1,171 @@
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪花</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
background-color: #5569ae;
background-image: url("img/bg.png");
background-size: 100% auto;
}
.snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100001;
}
</style>
</head>
<body>
<div class="snow-container"></div>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript">
function randomRange(t, i) {
return Math.random() * (i - t) + t
}
Particle3D = function (t) {
THREE.Particle.call(this, t), this.velocity = new THREE.Vector3(0, -2, 0), this.velocity.rotateX(randomRange(-
45, 45)), this.velocity.rotateY(randomRange(0, 360)), this.gravity = new THREE.Vector3(0, 0, 0), this
.drag = 1
}, Particle3D.prototype = new THREE.Particle, Particle3D.prototype.constructor = Particle3D, Particle3D.prototype
.updatePhysics = function () {
this.velocity.multiplyScalar(this.drag), this.velocity.addSelf(this.gravity), this.position.addSelf(this
.velocity)
};
var TO_RADIANS = Math.PI / 180;
THREE.Vector3.prototype.rotateY = function (t) {
cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.x;
this.x = o * cosRY + i * sinRY, this.z = o * -sinRY + i * cosRY
}, THREE.Vector3.prototype.rotateX = function (t) {
cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.y;
this.y = o * cosRY + i * sinRY, this.z = o * -sinRY + i * cosRY
}, THREE.Vector3.prototype.rotateZ = function (t) {
cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);
var i = this.x,
o = this.y;
this.y = o * cosRY + i * sinRY, this.x = o * -sinRY + i * cosRY
};
$(function () {
var container = document.querySelector(".snow-container");
if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
return
} else {
if (/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
$(container).css("height", $(window).height()).bind("click", function () {
$(this).fadeOut(1000, function () {
$(this).remove()
})
})
}
}
var containerWidth = $(container).width();
var containerHeight = $(container).height();
var particle;
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var particles = [];
var particleImage = new Image();
particleImage.src = "img/snow.png";
var snowNum = 500;
function init() {
camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(containerWidth, containerHeight);
var material = new THREE.ParticleBasicMaterial({
map: new THREE.Texture(particleImage)
});
for (var i = 0; i < snowNum; i++) {
particle = new Particle3D(material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add(particle);
particles.push(particle)
}
container.appendChild(renderer.domElement);
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("touchstart", onDocumentTouchStart, false);
document.addEventListener("touchmove", onDocumentTouchMove, false);
setInterval(loop, 1000 / 40)
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY
}
function onDocumentTouchStart(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY
}
}
function onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY
}
}
function loop() {
for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
particle.updatePhysics();
with (particle.position) {
if (y < -1000) {
y += 2000
}
if (x > 1000) {
x -= 2000
} else {
if (x < -1000) {
x += 2000
}
}
if (z > 1000) {
z -= 2000
} else {
if (z < -1000) {
z += 2000
}
}
}
}
camera.position.x += (mouseX - camera.position.x) * 0.005;
camera.position.y += (-mouseY - camera.position.y) * 0.005;
camera.lookAt(scene.position);
renderer.render(scene, camera)
}
init()
});
</script>
</body>
</html>