$(function(){
function init() {
//创建一个场景
const scene = new THREE.Scene();
//创建透视相机
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
//创建渲染器
const renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio)会自动帮你根据设备dpr设置canvas的实际物理像素以及视口的大小，你也可以输入更大的dpr以获得“HD-DPI”品质的渲染
renderer.setPixelRatio(window.devicePixelRatio);
//设置渲染区域尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement);
camera.position.set(10, 0, 0);
/**
* 轨道控制器
*
* **/
// 轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", render);
controls.minDistance = 1;
controls.maxDistance = 200;
controls.enablePan = false;
// 新增一个红色球
// const geometry = new THREE.SphereGeometry(1, 10, 10);
// const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// const mesh = new THREE.Mesh(geometry, material);
const mesh = addImg("https://cinoliu.github.io/ThreeJS-demo/images/px.jpg", scene, 1);
scene.add(mesh);
// 坐标轴辅助线
scene.add(new THREE.AxesHelper(1000));
controls.update(); // 控制器需要
controls.target.copy(mesh.position); function render() {
renderer.render(scene, camera);
}
function r() {
render();
requestAnimationFrame(r)
}
r();
}
init();
function addImg(url, scene, n = 1) {
const texture =THREE.TextureLoader(url);
const material = new THREE.MeshBasicMaterial({ map:texture });
const geometry = new THREE.SphereGeometry(1, 10, 10);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
return mesh;
}
});
const material = new THREE.MeshBasicMaterial({ map:texture });
这里的map在哪里定义的，找找看。
要写在加载回调中，写在外面获取不到
