threejs_r132.光源示例

web/JavaScript threejs_r132.光源示例

threejs里有：环境光、平行光、点光、聚光、半球光、面光。
AmbientLight（环境光）颜色会直接作用物体的当前颜色上。
DirectionalLight（平行光源）平行光源，例如太阳光。
PointLight（点光源）一个点射出向所有方向。
SpotLight（聚光灯）聚光灯效果。例如台灯。
HemisphereLight（半球光）创造自然室外光线，模拟反光和光线微弱的天空。
AreaLight（平面光源）光线从一个面射出。类似广告灯箱。
LensFlare（镜头炫光）给光源添加炫光效果。
常用前四种。

<canvas id="canvas"></canvas>
<script>

    let three_script = document.createElement("script");
    three_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js";

    let head = document.getElementsByTagName("head")[0];
    head.appendChild(three_script);

    three_script.onload = function () {
        let cinema = new Cinema();
        cinema.render();
    };

    class PlaneActor { // 平面
        constructor() {
            let planeSize = 400;
            let planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
            let planeMat = new THREE.MeshStandardMaterial({color: "#808080", side: THREE.DoubleSide});
            let mesh = new THREE.Mesh(planeGeo, planeMat);
            mesh.rotation.x = Math.PI * -.5;

            mesh.castShadow = true;    // 【产生影子】
            mesh.receiveShadow = true; // 【接收影子】

            this.plane = mesh;
        }
    }

    class BoxActor { // 盒子
        constructor() {
            let boxsize = 20;
            let cubeGeo = new THREE.BoxGeometry(boxsize, boxsize, boxsize);
            let cubeMat = new THREE.MeshPhongMaterial({color: "#4f4f03"});
            let mesh = new THREE.Mesh(cubeGeo, cubeMat);
            mesh.position.set(50, 20, 0);
            mesh.castShadow = true;    // 【允许投射阴影】
            mesh.receiveShadow = true; // 【允许接收阴影】

            this.box = mesh;
        }
    }

    class SphereActor { // 球
        constructor() {
            let radius = 15;
            let sphereGeo = new THREE.SphereGeometry(radius);
            let sphereMat = new THREE.MeshPhongMaterial({color: "#4f4f03"});
            let mesh = new THREE.Mesh(sphereGeo, sphereMat);
            mesh.position.set(0, 30, 50);
            mesh.castShadow = true;    // 【允许投射阴影】
            mesh.receiveShadow = true; // 【允许接收阴影】

            this.sphere = mesh;
        }
    }

    class CylinderActor { // 圆柱体
        constructor() {
            var cylinderGeo = new THREE.CylinderGeometry(10, 15, 15, 10, 10);
            var cylinderMat = new THREE.MeshLambertMaterial({color: 0xFF6600});
            var mesh = new THREE.Mesh(cylinderGeo, cylinderMat);
            mesh.position.set(-65, 35, -35);// 设置圆柱坐标sphere
            mesh.castShadow = true;    //【允许投射阴影】
            mesh.receiveShadow = true; //【允许接收阴影】

            this.cylinder = mesh;
        }
    }

    class AmbientLightManager {
        constructor() {
            // 环境光
            // 均匀的照亮场景中的所有物体，影响整个场景。
            // 它没有方向，不能投射阴影。
            let ambientcolor = "#f4f9f3";
            this.light = new THREE.AmbientLight();
            this.light.color.set(ambientcolor);
        }
    }

    class RectAreaLightManager {
        constructor() {
            // 平面光。
            // 受平面光影响的材质：MeshStandardMaterial。
            // 不产生投影
            // color 默认0xffffff
            // intensity 光源强度／亮度，默认1，0 - ~
            // width 光源宽度，默认10，只要不小于0都可以。
            // height 光源高度，默认10，只要不小于0都可以。
            let rectlight = new THREE.RectAreaLight("#ffffff", 4);
            rectlight.position.set(-30, 25, 60); // 光的位置
            rectlight.rotation.x = -Math.PI;     // 绕轴旋转
            rectlight.rotation.y = -Math.PI / 3; // 绕轴旋转
            rectlight.width = 30;
            rectlight.height = 50; // 对应位置y=25而在'地面'上

            // 辅助查看光源位置
            let planeGeometry = new THREE.PlaneBufferGeometry();
            let basicMaterial = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});
            var mesh = new THREE.Mesh(planeGeometry, basicMaterial);
            mesh.scale.x = rectlight.width;
            mesh.scale.y = rectlight.height;
            rectlight.add(mesh);

            this.light = rectlight;
        }
    }

    class HemisphereLightManager {
        constructor() {
            // 半球环境光
            // 产生从天空光线颜色到地面光线颜色的渐变效果。影响某些材质。
            // 不产生投影。
            // 可模拟在户外场景中的反光效果。
            let skyColor = "#ff0000";
            let groundColor = "#0000ff";
            let intensity = 0.8;
            this.light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
            this.light.position.set(20, 10, 50);
            // 半球光的图例
            let size = 10;
            this.lightHelper = new THREE.HemisphereLightHelper(this.light, size, groundColor);
        }
    }

    class PointLightManager {
        constructor() {
            // 点光源。
            // 电灯泡，光线也发射到四面八方。
            // 不产生投影。
            let color = "#ff0000";// 光线颜色
            this.light = new THREE.PointLight(color);
            this.light.position.set(75, 20, 0); // 位置
            this.light.distance = 60;           // 照射距离
            this.light.intensity = 1;           // 强度 默认为1
            this.light.visible = true;          // 开关，默认开

            // this.light.shadow.camera.visible = true; // 开启投影
            // this.light.castShadow = true; // 开启投影，无效，但会影响其它光源产生的投影。

            // 点光源图例
            let sphereSize = 10;
            this.lightHelper = new THREE.PointLightHelper(this.light, sphereSize, color);
        }
    }

    class DirectionalLightManager {
        constructor() {
            // 平行光
            // 类似比较强烈的日光，任何地方的强度都是一样的。
            // 可以产生投影（投影有范围，且须要被renderer和物体的支持）。
            let color = "#9f0000";
            let intensity = 1;
            this.light = new THREE.DirectionalLight(color, intensity);
            this.light.position.set(-25, 100, -25);       // 光线从哪个方向来
            this.light.target.position.set(-15, 0, -15);  // 射向哪里
            // 平行光图例
            this.lightHelper = new THREE.DirectionalLightHelper(this.light);
            this.lightHelper.lightPlane.scale.set(20, 20, 20);     // 光源图例的大小
            this.lightHelper.lightPlane.material.color.set(color); // 光源图例的颜色

            this.light.castShadow = true; // 【开启产生投影】
            // 以下设置投影
            this.light.shadow.camera.visible = true;
            let d = 60;
            this.light.shadow.camera.left = -d; // 产生的范围。如果物体只有部分在这个空间，影子也只有部分。
            this.light.shadow.camera.right = d;
            this.light.shadow.camera.top = d;
            this.light.shadow.camera.bottom = -d;
            this.light.shadow.camera.far = 500; // 超过这个距离没有影子
            this.light.shadow.bias = -0.01;     // 偏差率
            this.light.shadow.mapSize.height = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            this.light.shadow.mapSize.width = 2048;  // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            // 投影图例
            this.lightCameraHelper = new THREE.CameraHelper(this.light.shadow.camera);
        }
    }

    class SpotLightManager {
        constructor() {
            // 聚光灯光源
            // 类似手电筒，会形成一种锥形效果的光。
            // 可以产生阴影。
            let color = "#00ff00";   // 颜色的,默认0xffffff(white).
            let intensity = 1;       // 光照强度，默认1.
            let distance = 0;        // 光线逐渐衰减到此距离消失。默认0，不衰减。
            let angle = Math.PI / 3; // 光源的散射角度默认为夹角90度的Math.PI/2.
            // let penumbra = 0;     // 光影聚焦的百分比0-1之间，默认值为0，会产生锯齿.
            // let decay = 1;        // 光在距离上的强度.
            let spotLight = new THREE.SpotLight(color, intensity, distance, angle);
            spotLight.position.set(-50, 55, 40);
            // 光源图例
            this.lightHelper = new THREE.SpotLightHelper(spotLight, color);
            this.lightHelper.cone.material.color.set(color); // 光源图例的颜色

            spotLight.castShadow = true; // 【开启产生投影】
            // 投影设置
            spotLight.shadow.camera.visible = true;
            spotLight.shadow.camera.near = 1;
            spotLight.shadow.camera.far = 200; // 阴影最长投射距离
            spotLight.shadow.camera.fov = angle * 90; // 摄像机视锥体垂直视野角度。仅辅助看影子的far，没实际影响
            spotLight.shadow.mapSize.height = 2048;   // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            spotLight.shadow.mapSize.width = 2048;    // 影子贴图分辨率，影响renderer的PCFSoftShadowMap
            // 投影图例
            this.lightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);

            this.light = spotLight;
        }
    }

    class CameraManager {
        constructor(canvas) {
            let aspect = canvas.width / canvas.height;
            let _camera = new THREE.PerspectiveCamera(60, aspect, 1, 1500);
            _camera.position.set(90, 80, 120);
            _camera.lookAt(0, 5, 0);

            let _controls = new THREE.OrbitControls(_camera, canvas);
            _controls.target.set(0, 5, 0);

            let _cameraHelper = new THREE.CameraHelper(_camera); // 视窗加个十字瞄准

            this.camera = _camera;
            this.cameraHelper = _cameraHelper;
        }
    }

    class Cinema {
        constructor() {
            let canvas = document.getElementById('canvas');
            canvas.width = 800;
            canvas.height = 350;
            
            this.renderer = new THREE.WebGLRenderer({canvas});
            this.renderer.shadowMap.enabled = true; // 【渲染阴影】
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // PCFSoftShadowMap 影子边缘柔和，基于像素。分辨率低时无效果。

            let cameraManager = new CameraManager(canvas);
            this.camera = cameraManager.camera;
            
            this.scene = new THREE.Scene();

            this.scene.add(cameraManager.cameraHelper);
            
            let axes = new THREE.AxesHelper(150);
            this.scene.add(axes);
            
            this.scene.add(new PlaneActor().plane);
            this.scene.add(new BoxActor().box);
            this.scene.add(new SphereActor().sphere);
            this.scene.add(new CylinderActor().cylinder);
            
            this.scene.add(new AmbientLightManager().light);
            this.scene.add(new RectAreaLightManager().light);
            let hemiLight = new HemisphereLightManager();
            this.scene.add(hemiLight.light);
            this.scene.add(hemiLight.lightHelper);
            let pointLight = new PointLightManager();
            this.scene.add(pointLight.light);
            this.scene.add(pointLight.lightHelper);
            let directionalLight = new DirectionalLightManager();
            this.scene.add(directionalLight.light);
            this.scene.add(directionalLight.lightHelper);
            this.scene.add(directionalLight.lightCameraHelper);
            let spotLight = new SpotLightManager();
            this.scene.add(spotLight.light);
            this.scene.add(spotLight.lightHelper);
            this.scene.add(spotLight.lightCameraHelper);
        }

        render() {
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(this.render.bind(this));
        }
    }
}</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

let three_script = document.createElement("script");

three_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js";

let head = document.getElementsByTagName("head")[0];

head.appendChild(three_script);

three_script.onload = function () {

let cinema = new Cinema();

cinema.render();

};

class PlaneActor { // 平面

constructor() {

let planeSize = 400;

let planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);

let planeMat = new THREE.MeshStandardMaterial({color: "#808080", side: THREE.DoubleSide});

let mesh = new THREE.Mesh(planeGeo, planeMat);

mesh.rotation.x = Math.PI * -.5;

mesh.castShadow = true; // 【产生影子】

mesh.receiveShadow = true; // 【接收影子】

this.plane = mesh;

}

class BoxActor { // 盒子

constructor() {

let boxsize = 20;

let cubeGeo = new THREE.BoxGeometry(boxsize, boxsize, boxsize);

let cubeMat = new THREE.MeshPhongMaterial({color: "#4f4f03"});

let mesh = new THREE.Mesh(cubeGeo, cubeMat);

mesh.position.set(50, 20, 0);

mesh.castShadow = true; // 【允许投射阴影】

mesh.receiveShadow = true; // 【允许接收阴影】

this.box = mesh;

}

class SphereActor { // 球

constructor() {

let radius = 15;

let sphereGeo = new THREE.SphereGeometry(radius);

let sphereMat = new THREE.MeshPhongMaterial({color: "#4f4f03"});

let mesh = new THREE.Mesh(sphereGeo, sphereMat);

mesh.position.set(0, 30, 50);

mesh.castShadow = true; // 【允许投射阴影】

mesh.receiveShadow = true; // 【允许接收阴影】

this.sphere = mesh;

}

class CylinderActor { // 圆柱体

constructor() {

var cylinderGeo = new THREE.CylinderGeometry(10, 15, 15, 10, 10);

var cylinderMat = new THREE.MeshLambertMaterial({color: 0xFF6600});

var mesh = new THREE.Mesh(cylinderGeo, cylinderMat);

mesh.position.set(-65, 35, -35);// 设置圆柱坐标sphere

mesh.castShadow = true; //【允许投射阴影】

mesh.receiveShadow = true; //【允许接收阴影】

this.cylinder = mesh;

}

class AmbientLightManager {

constructor() {

// 环境光

// 均匀的照亮场景中的所有物体，影响整个场景。

// 它没有方向，不能投射阴影。

let ambientcolor = "#f4f9f3";

this.light = new THREE.AmbientLight();

this.light.color.set(ambientcolor);

}

class RectAreaLightManager {

constructor() {

// 平面光。

// 受平面光影响的材质：MeshStandardMaterial。

// 不产生投影

// color 默认0xffffff

// intensity 光源强度／亮度，默认1，0 - ~

// width 光源宽度，默认10，只要不小于0都可以。

// height 光源高度，默认10，只要不小于0都可以。

let rectlight = new THREE.RectAreaLight("#ffffff", 4);

rectlight.position.set(-30, 25, 60); // 光的位置

rectlight.rotation.x = -Math.PI; // 绕轴旋转

rectlight.rotation.y = -Math.PI / 3; // 绕轴旋转

rectlight.width = 30;

rectlight.height = 50; // 对应位置y=25而在'地面'上

// 辅助查看光源位置

let planeGeometry = new THREE.PlaneBufferGeometry();

let basicMaterial = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});

var mesh = new THREE.Mesh(planeGeometry, basicMaterial);

mesh.scale.x = rectlight.width;

mesh.scale.y = rectlight.height;

rectlight.add(mesh);

this.light = rectlight;

}

class HemisphereLightManager {

constructor() {

// 半球环境光

// 产生从天空光线颜色到地面光线颜色的渐变效果。影响某些材质。

// 不产生投影。

// 可模拟在户外场景中的反光效果。

let skyColor = "#ff0000";

let groundColor = "#0000ff";

let intensity = 0.8;

this.light = new THREE.HemisphereLight(skyColor, groundColor, intensity);

this.light.position.set(20, 10, 50);

// 半球光的图例

let size = 10;

this.lightHelper = new THREE.HemisphereLightHelper(this.light, size, groundColor);

}

class PointLightManager {

constructor() {

// 点光源。

// 电灯泡，光线也发射到四面八方。

// 不产生投影。

let color = "#ff0000";// 光线颜色

this.light = new THREE.PointLight(color);

this.light.position.set(75, 20, 0); // 位置

this.light.distance = 60; // 照射距离

this.light.intensity = 1; // 强度默认为1

this.light.visible = true; // 开关，默认开

// this.light.shadow.camera.visible = true; // 开启投影

// this.light.castShadow = true; // 开启投影，无效，但会影响其它光源产生的投影。

// 点光源图例

let sphereSize = 10;

this.lightHelper = new THREE.PointLightHelper(this.light, sphereSize, color);

}

class DirectionalLightManager {

constructor() {

// 平行光

// 类似比较强烈的日光，任何地方的强度都是一样的。

// 可以产生投影（投影有范围，且须要被renderer和物体的支持）。

let color = "#9f0000";

let intensity = 1;

this.light = new THREE.DirectionalLight(color, intensity);

this.light.position.set(-25, 100, -25); // 光线从哪个方向来

this.light.target.position.set(-15, 0, -15); // 射向哪里

// 平行光图例

this.lightHelper = new THREE.DirectionalLightHelper(this.light);

this.lightHelper.lightPlane.scale.set(20, 20, 20); // 光源图例的大小

this.lightHelper.lightPlane.material.color.set(color); // 光源图例的颜色

this.light.castShadow = true; // 【开启产生投影】

// 以下设置投影

this.light.shadow.camera.visible = true;

let d = 60;

this.light.shadow.camera.left = -d; // 产生的范围。如果物体只有部分在这个空间，影子也只有部分。

this.light.shadow.camera.right = d;

this.light.shadow.camera.top = d;

this.light.shadow.camera.bottom = -d;

this.light.shadow.camera.far = 500; // 超过这个距离没有影子

this.light.shadow.bias = -0.01; // 偏差率

this.light.shadow.mapSize.height = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

this.light.shadow.mapSize.width = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

// 投影图例

this.lightCameraHelper = new THREE.CameraHelper(this.light.shadow.camera);

}

class SpotLightManager {

constructor() {

// 聚光灯光源

// 类似手电筒，会形成一种锥形效果的光。

// 可以产生阴影。

let color = "#00ff00"; // 颜色的,默认0xffffff(white).

let intensity = 1; // 光照强度，默认1.

let distance = 0; // 光线逐渐衰减到此距离消失。默认0，不衰减。

let angle = Math.PI / 3; // 光源的散射角度默认为夹角90度的Math.PI/2.

// let penumbra = 0; // 光影聚焦的百分比0-1之间，默认值为0，会产生锯齿.

// let decay = 1; // 光在距离上的强度.

let spotLight = new THREE.SpotLight(color, intensity, distance, angle);

spotLight.position.set(-50, 55, 40);

// 光源图例

this.lightHelper = new THREE.SpotLightHelper(spotLight, color);

this.lightHelper.cone.material.color.set(color); // 光源图例的颜色

spotLight.castShadow = true; // 【开启产生投影】

// 投影设置

spotLight.shadow.camera.visible = true;

spotLight.shadow.camera.near = 1;

spotLight.shadow.camera.far = 200; // 阴影最长投射距离

spotLight.shadow.camera.fov = angle * 90; // 摄像机视锥体垂直视野角度。仅辅助看影子的far，没实际影响

spotLight.shadow.mapSize.height = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

spotLight.shadow.mapSize.width = 2048; // 影子贴图分辨率，影响renderer的PCFSoftShadowMap

// 投影图例

this.lightCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);

this.light = spotLight;

}

class CameraManager {

constructor(canvas) {

let aspect = canvas.width / canvas.height;

let _camera = new THREE.PerspectiveCamera(60, aspect, 1, 1500);

_camera.position.set(90, 80, 120);

_camera.lookAt(0, 5, 0);

let _controls = new THREE.OrbitControls(_camera, canvas);

_controls.target.set(0, 5, 0);

let _cameraHelper = new THREE.CameraHelper(_camera); // 视窗加个十字瞄准

this.camera = _camera;

this.cameraHelper = _cameraHelper;

}

class Cinema {

constructor() {

let canvas = document.getElementById('canvas');

canvas.width = 800;

canvas.height = 350;

this.renderer = new THREE.WebGLRenderer({canvas});

this.renderer.shadowMap.enabled = true; // 【渲染阴影】

this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // PCFSoftShadowMap 影子边缘柔和，基于像素。分辨率低时无效果。

let cameraManager = new CameraManager(canvas);

this.camera = cameraManager.camera;

this.scene = new THREE.Scene();

this.scene.add(cameraManager.cameraHelper);

let axes = new THREE.AxesHelper(150);

this.scene.add(axes);

this.scene.add(new PlaneActor().plane);

this.scene.add(new BoxActor().box);

this.scene.add(new SphereActor().sphere);

this.scene.add(new CylinderActor().cylinder);

this.scene.add(new AmbientLightManager().light);

this.scene.add(new RectAreaLightManager().light);

let hemiLight = new HemisphereLightManager();

this.scene.add(hemiLight.light);

this.scene.add(hemiLight.lightHelper);

let pointLight = new PointLightManager();

this.scene.add(pointLight.light);

this.scene.add(pointLight.lightHelper);

let directionalLight = new DirectionalLightManager();

this.scene.add(directionalLight.light);

this.scene.add(directionalLight.lightHelper);

this.scene.add(directionalLight.lightCameraHelper);

let spotLight = new SpotLightManager();

this.scene.add(spotLight.light);

this.scene.add(spotLight.lightHelper);

this.scene.add(spotLight.lightCameraHelper);

}

render() {

this.renderer.render(this.scene, this.camera);

requestAnimationFrame(this.render.bind(this));

}

}</script>

- end

声明

本文由 cuiweiyou 原创，转载请注明出处：http://www.gaohaiyan.com/3111.html

承接App定制、企业web站点、办公系统软件设计开发，外包项目，毕设