threejs2创建小球和辅助器（可控制）
Posted Jessica巨人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了threejs2创建小球和辅助器（可控制）相关的知识，希望对你有一定的参考价值。
import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three"
import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
var renedrer,camera,control,scene;
function init()
{
renedrer=new WebGLRenderer({});
document.body.appendChild(renedrer.domElement);
renedrer.setSize(window.innerWidth,window .innerHeight);
camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.z=20;
var light=new HemisphereLight(0xfffff,0x444444);
control=new OrbitControls(camera,renedrer.domElement);
scene =new Scene();
scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
scene.add(light);
scene.add(new AxesHelper(10000));
window.addEventListener('resize',()=>{
renedrer.setSize(window.innerWidth,window .innerHeight);
})
}
function render() {
renedrer.render(scene,camera);
requestAnimationFrame(render);
}
init();
render();
效果图：
会拉扁
import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three"
import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
var renedrer,camera,control,scene;
function init()
{
renedrer=new WebGLRenderer({});
document.body.appendChild(renedrer.domElement);
renedrer.setSize(window.innerWidth,window .innerHeight);
camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.z=20;
var light=new HemisphereLight(0xfffff,0x444444);
control=new OrbitControls(camera,renedrer.domElement);
scene =new Scene();
scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
scene.add(light);
scene.add(new AxesHelper(10000));
window.addEventListener('resize',()=>{
renedrer.setSize(window.innerWidth,window .innerHeight);
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
})
}
function render() {
renedrer.render(scene,camera);
requestAnimationFrame(render);
}
init();
render();
这样就好啦
以上是关于threejs2创建小球和辅助器（可控制）的主要内容，如果未能解决你的问题，请参考以下文章