\u6b65\u9aa4:<\/p>\n\n\n\n
<!-- \u9634\u5f71\u57fa\u7840 -->
<template>
<div><\/div>
<\/template>
\u200b
<script>
\/* eslint-disable *\/
import * as THREE from 'three';
import {OrbitControls} from \"three\/examples\/jsm\/controls\/OrbitControls.js\"
let scene; \/\/ \u573a\u666f
let camera; \/\/ \u76f8\u673a
let renderer; \/\/ \u6e32\u67d3\u5668
let controls; \/\/ \u8f68\u9053\u63a7\u5236\u5668
let cube ; \/\/ \u51e0\u4f55\u4f53
export default {
name:\"component06-01\",
data () {
return {
};
},
\u200b
components:{},
\u200b
computed:{},
\u200b
mounted(){
this.init()
this.render()
},
\u200b
methods:{
init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth \/ window.innerHeight,
0.1,
1000
)
\/\/ \u76f8\u673a\u4f4d\u7f6e
camera.position.set(0,0,10);
scene.add(camera)
\u200b
\/\/ \u521d\u59cb\u5316\u6e32\u67d3\u5668
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMap.enabled = true; \/\/ \u5f00\u542f\u6e32\u67d3\u5668\u9634\u5f71\u7684\u8ba1\u7b97
document.body.appendChild(renderer.domElement)
\u200b
\/\/ \u521b\u5efa\u5750\u6807\u8f85\u52a9\u5668
const axesHelper = new THREE.AxesHelper(5);
scene.add( axesHelper );
\u200b
\/\/ \u521d\u59cb\u5316\u8f68\u9053\u5668
controls = new OrbitControls(camera,renderer.domElement)
\u200b
\/\/ \u5168\u666f\u5149\u7ebf
const light = new THREE.AmbientLight(\"#ffffff\")
scene.add(light)
\/\/ \u76f4\u7ebf\u5149\u7ebf
const directionalLight = new THREE.DirectionalLight(\"#ffffff\")
directionalLight.position.set(10,10,10)
directionalLight.castShadow = true \/\/ \u5149\u7167\u6295\u5c04\u9634\u5f71
directionalLight.shadow.mapSize.set(2048,2048) \/\/ \u9634\u5f71\u7684\u5206\u8fa8\u7387
directionalLight.shadow.radius = 20;
scene.add(directionalLight)
\u200b
\/\/ RGBE\u6e32\u67d3\u5668
const material = new THREE.MeshStandardMaterial({
metalness:0.7,
roughness:0.1,
})
\u200b
\/\/ \u521b\u5efa\u7403\u4f53
const sphereGeometry = new THREE.SphereGeometry( 1,200,200 );
const sphere = new THREE.Mesh(sphereGeometry,material)
sphere.castShadow = true \/\/ \u8bbe\u65bd\u7269\u4f53\u6295\u5c04\u9634\u5f71
scene.add(sphere)
\u200b
\/\/ \u521b\u5efa\u7269\u4f53 \u5e73\u9762
const planeGeometry = new THREE.PlaneGeometry(10,10)
const plane = new THREE.Mesh(planeGeometry,material)
plane.position.set(0,-1,0)
plane.receiveShadow = true; \/\/ \u8bbe\u7f6e\u7269\u4f53\u63a5\u53d7\u9634\u5f71
plane.rotation.x = -Math.PI \/ 2
scene.add(plane)
\u200b
},
\u200b
render(){
renderer.render(scene,camera)
controls.update();
requestAnimationFrame(this.render)
}
\u200b
}
}
\u200b
<\/script>
<style scoped>
<\/style><\/code><\/pre>\n\n\n\n
\n\n\n\n2. \u5e73\u884c\u5149\u6295\u5f71\u76f8\u673a\u5c5e\u6027\u53c2\u6570<\/h2>\n\n\n\ndirectionalLight.shoadow.camera.near = 0.5
directionalLight.shoadow.camera.far = 500
directionalLight.shoadow.camera.top = 5
directionalLight.shoadow.camera.bottom = -*5
directionalLight.shoadow.camera.left = -5
directionalLight.shoadow.camera.right = 5<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u6b65\u9aa4: \u6750\u8d28\u80fd\u591f\u5bf9\u5149\u7167\u7684\u53cd\u5e94 \u8bbe\u7f6e\u6e32\u67d3\u5668\u5f00\u542f\u9634\u5f71\u7684\u8ba1\u7b97: renderer.shadowMap.enabled […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-451","post","type-post","status-publish","format-standard","hentry","category-three"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=451"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions"}],"predecessor-version":[{"id":452,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions\/452"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}