纹理贴图
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cameras</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <!-- <link type="text/css" rel="stylesheet" href="main.css"> --> <style> body{ padding: 0px; margin: 0px; font-size: 0px; } a { color: #08f; } b { color: lightgreen; } </style> </head> <body> <div id="info"></div> </body> <script type="module"> import * as THREE from './js/three.module.js'; import Stats from './js/stats.module.js'; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var aspect = SCREEN_WIDTH / SCREEN_HEIGHT; var camera, scene, renderer; var container = document.getElementById('info'); var pointLight,particles,mesh; init(); function init() { sceneInit(); cameraInit(); initCube(); renderInit(); animate(); } function sceneInit(){ scene = new THREE.Scene(); } function initCube(){var texturePainting = new THREE.TextureLoader().load( './image/earth.jpg' ); var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ); mesh = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 42, 42 ), materialPainting // new THREE.MeshNormalMaterial( { flatShading: true } ) ); mesh.position.z = 1600; scene.add( mesh ); } function cameraInit(){ camera = new THREE.PerspectiveCamera( 50, aspect, 1, 10000 ); camera.position.z = 2500; scene.add( camera ); } function renderInit(){ renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.render( scene, camera ); renderer.setClearColor(0xffffff); // renderer.clear(); container.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); render(); } function render(){ mesh.rotation.x += 0.001; mesh.rotation.y -= 0.005; renderer.clear(); renderer.render( scene, camera ); } </script> </html>
'./js/three.module.js'
直接从官网的example里面下载下来就行了。
文档: https://threejs.org/docs/index.html#api/en/loaders/TextureLoader
var texturePainting = new THREE.TextureLoader().load( './image/earth.jpg' ); var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } ); //基础材质
//上面两行是贴图材质的写法 mesh = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 42, 42 ), materialPainting );
官方文档的demo还有一个异步的加载
var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' ); // immediately use the texture for material creation var material = new THREE.MeshBasicMaterial( { map: texture } );
网上找的图片