index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>测试</title> ???<script src="js/three.min.js"></script> ???<script src="js/stats.min.js"></script> ???<script src="js/tweenjs.min.js"></script> ???<style> ???????html, body { ???????????width: 100%; ???????????height: 100%; ???????????margin: 0; ???????????padding: 0; ???????} ???</style></head><body><canvas></canvas></body><script src="js/chapter/chapter6.1.js"></script></html>chapter6.1.js
var scene, camera, renderer;function init() { ???//init scene ???scene = new THREE.Scene(); ???//init renderer ???var canvas = document.body.querySelector("canvas"); ???canvas.width = window.innerWidth; ???canvas.height = window.innerHeight; ???renderer = new THREE.WebGLRenderer({ ???????canvas: canvas, ???????antialias: true ???}); ???renderer.setSize(window.innerWidth, window.innerHeight); ???renderer.setClearColor(0x000000, 1); ???//init camera ???camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); ???camera.position.set(0, 0, 100); ???camera.up.set(0, 1, 0); ???camera.lookAt(0, 0, 0); ???//init light ???var light = new THREE.PointLight(0xffffff); ???light.position.set(0, 0, 100); ???scene.add(light); ???var geometry = new THREE.PlaneGeometry(60, 30); ???var texture = new THREE.TextureLoader().load("images/a.jpg"); ???var material = new THREE.MeshLambertMaterial({ ???????map: texture, ???????side: THREE.DoubleSide ???}); ???var mesh = new THREE.Mesh(geometry, material); ???scene.add(mesh);}function animate() {
???//不是很明白为什么设置纹理需要用requestAnimationFrame ???requestAnimationFrame(animate); ???renderer.render(scene, camera);}init();animate();three.js学习：纹理Texture之平面纹理
原文地址：https://www.cnblogs.com/wsfu/p/10358513.html