ThreeJS 官方案例学习(webgl_geometries_parametric)
1.效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8e7381fc3f1b40b28edf3a436dac91a7.jpeg#pic_center)
2.源码
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import gsap from 'gsap';
import { ParametricGeometry } from 'three/examples/jsm/geometries/ParametricGeometry.js';
import { ParametricGeometries } from 'three/examples/jsm/geometries/ParametricGeometries.js';
import * as Curves from 'three/examples/jsm/curves/CurveExtras.js';
export default {
data() {
return {
container: null,
height: 0,
width: 0,
scene: null,
camera: null,
renderer: null,
controller: null,
stats: null,
mixer: null,
model: null,
clock: new THREE.Clock(),
};
},
mounted() {
this.init()
this.animate()
window.addEventListener("resize", this.onWindowSize)
},
beforeUnmount() {
console.log('beforeUnmount===============');
this.container = null
this.scene = null
this.camera = null
this.renderer = null
this.controller = null
this.stats = null
this.mixer = null
this.model = null
},
methods: {
init() {
this.container = document.getElementById('container')
this.width = this.container.clientWidth
this.height = this.container.clientHeight
this.setScene()
this.setCamera()
this.setRenderer()
this.setController()
this.addHelper()
this.setPMREMGenerator()
this.setLight()
this.setMesh()
this.addStatus()
},
setScene() {
this.scene = new THREE.Scene()
},
setCamera() {
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 2000)
this.camera.position.set(0, 400, 800)
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
this.camera.lookAt(new THREE.Vector3(0, 0, 0))
this.scene.add(this.camera)
},
setRenderer() {
this.renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true,
})
this.renderer.setSize(this.width, this.height);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.container.appendChild(this.renderer.domElement);
},
setController() {
this.controller = new OrbitControls(this.camera, this.renderer.domElement);
this.controller.enableDamping = true;
this.controller.dampingFactor = 0.04;
this.controller.target.set(0, 0, 0);
},
addHelper() {
let helper = new THREE.CameraHelper(this.camera);
let axisHelper = new THREE.AxesHelper(450);
this.scene.add(axisHelper)
let gridHelper = new THREE.GridHelper(400, 30, 0x2C2C2C, 0x888888);
this.scene.add(gridHelper);
},
setPMREMGenerator() {
const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
},
setLight() {
const ambientLight = new THREE.AmbientLight(0xcccccc, 1.5);
this.scene.add(ambientLight);
const PointLight = new THREE.PointLight(0xffffff, 2.5, 0, 0);
this.scene.add(PointLight);
},
addStatus() {
this.stats = new Stats();
this.container.appendChild(this.stats.dom);
},
setMesh() {
let geometry, object;
const map = new THREE.TextureLoader().load('/textures/uv_grid_opengl.jpg');
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
map.colorSpace = THREE.SRGBColorSpace;
const material = new THREE.MeshPhongMaterial({ map: map, side: THREE.DoubleSide });
geometry = new ParametricGeometry(ParametricGeometries.plane(100, 100), 10, 10);
geometry.center();
object = new THREE.Mesh(geometry, material);
object.position.set(- 200, 0, 200);
this.scene.add(object);
geometry = new ParametricGeometry(ParametricGeometries.klein, 20, 20);
object = new THREE.Mesh(geometry, material);
object.position.set(0, 0, 200);
object.scale.multiplyScalar(5);
this.scene.add(object);
geometry = new ParametricGeometry(ParametricGeometries.mobius, 20, 20);
object = new THREE.Mesh(geometry, material);
object.position.set(200, 0, 200);
object.scale.multiplyScalar(30);
this.scene.add(object);
const torus = new ParametricGeometries.TorusKnotGeometry(50, 10, 50, 20, 2, 3);
object = new THREE.Mesh(torus, material);
object.position.set(- 200, 0, - 200);
this.scene.add(object);
const sphere = new ParametricGeometries.SphereGeometry(50, 20, 10);
object = new THREE.Mesh(sphere, material);
object.position.set(0, 0, - 200);
this.scene.add(object);
const GrannyKnot = new Curves.GrannyKnot();
const tube = new ParametricGeometries.TubeGeometry(GrannyKnot, 100, 3, 8, false);
object = new THREE.Mesh(tube, material);
object.position.set(200, 0, - 200);
object.scale.multiplyScalar(2);
this.scene.add(object);
},
onWindowSize() {
this.width = this.container.clientWidth
this.height = this.container.clientHeight
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(this.width, this.height);
this.renderer.setPixelRatio(window.devicePixelRatio)
},
animate() {
const timer = Date.now() * 0.0001;
const delta = this.clock.getDelta();
if (this.mixer) {
this.mixer.update(delta);
}
requestAnimationFrame(this.animate);
this.controller.update(delta);
this.stats.update();
this.renderer.render(this.scene, this.camera);
},
},
};
</script>
<style>
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>